export default function ProductPage() {
const params = useParams();
const [productDetails, setProductDetails] = useState([]);
useEffect(() => {
fetch("/api/galeria.json")
.then((response) => response.json())
.then((data) => {
const category = data.find(
(item) => item.category_id == params.category_id
);
if (category) {
const product = category.art.find(
(item) => item.art_id == params.art_id
);
setProductDetails(product);
}
});
}, []);
return (
<section className="productPage">
<h1>{productDetails.name}</h1>
<div className="productViewer">
<div className="viewerRow">
<div className="viewerColOne">
{productDetails.product_image.map((image, index) => {
return index < 4 ? (
<div key={index} className="productRow">
<img
src={image}
alt={`arte ${productDetails.name} em diferentes salas`}
/>
</div>
) : null;
})}
</div>
<div className="viewerColTwo"></div>
</div>
</div>
</section>
);
}
我尝试创建一个产品页面,其中包含产品的图片滑块,但是... product:image应该是图片的路径字符串数组,尽管在控制台日志中
product_image返回一个数组。
Map上说它没有定义。
1条答案
按热度按时间qij5mzcb1#
因为第一次未定义时应该检查类型
或将其初始化为空数组
希望这能有所帮助!