[英]React - Array of images not rendering properly
Working on a project here and I ran into an issue.在这里做一个项目,我遇到了一个问题。 I am using an API and I receive images of a product.
我正在使用 API 并收到产品图片。 It looks like this:
它看起来像这样:
The issue I am having is that the image doesn't appear on my page, nothing at all appears.我遇到的问题是图像没有出现在我的页面上,什么也没有出现。 Even if I try to just write the link in an
<h1>
tag, nothing appears.即使我尝试只在
<h1>
标记中写入链接,也不会出现任何内容。 I tried to log the URLs in console, and it works there using the .map
method.我试图在控制台中记录 URL,它使用
.map
方法在那里工作。
I have tried with Object.keys()
and array.map()
, but non of them work.我试过
Object.keys()
和array.map()
,但它们都不起作用。
Here is my API fetch code:这是我的 API 获取代码:
useEffect(() => {
const options = {
method: "GET",
url: "https://asos2.p.rapidapi.com/products/v3/detail",
params: params,
headers: {
"x-rapidapi-key": "",
"x-rapidapi-host": "",
},
};
axios
.request(options)
.then(function (response) {
console.log(response.data);
setProduct(response.data);
})
.catch(function (error) {
console.error(error);
});
}, []);
// This works
product?.media?.images.map((item) => {
console.log(item.url);
});
return (
<div>
<Product
name={product?.name}
price={product?.price?.current?.text}
brand={product?.brand?.description?.replace(/(<([^>]+)>)/gi, "")}
brandName={product?.brand?.name}
aboutMe={product?.info?.aboutMe?.replace(/(<([^>]+)>)/gi, " ")}
careInfo={product?.info?.careInfo?.replace(/(<([^>]+)>)/gi, "")}
sizeAndFit={product?.info?.sizeAndFit?.replace(/(<([^>]+)>)/gi, "")}
media={product?.media?.images}
/>
</div>
);
And here is the product section where it shall render:这是它应该呈现的产品部分:
<div>
{props.media?.map((media) => {
<h1>{media.url}</h1>;
})}
</div>
The page is just completely blank.该页面完全是空白的。
What am I missing?我错过了什么?
I think the return statement is missing in the map
我认为
map
中缺少返回语句
<div>
{props.media?.map((media) => {
return(<h1>{media.url}</h1>);
})}
</div>
or you can also go for shorthand或者您也可以使用 go 进行速记
<div>
{props.media?.map((media) => <h1>{media.url}</h1>)}
</div>
are you missing.images and try get url from media[0].url你错过了.images 并尝试从 media[0].url 获取 url
<div>
{props.media?.images?.map((image) => {
return <h1>{image.url}</h1>;
})}
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.