在遍历对象数组列表之后，我尝试渲染图像。
在遍历对象数组列表之后，我尝试渲染图像。
提问于 2020-04-18 04:08:15
我正在循环遍历一个数组，它是一个对象列表。在对象中，我有关于手机的信息，例如:标题，信息，img，公司等。
当我第一次遍历数组时，我能够获得包括图像在内的所有细节并在屏幕上呈现。然后，我为每个列表设置了一个链接，当您单击它时，它会将您带到产品详细信息组件，其中显示了有关该产品的所有信息。
我现在面临的问题是，在ProductDetails组件中，我能够获取对象中包含的所有信息，并将它们呈现在屏幕上，但图像除外。
为什么图像不能在ProductDetails组件中呈现？
我做错什么了吗？下面是我的代码。提前谢谢。
import React, { useEffect, useState } from "react";
import { storeProducts } from "./data";
const ProductDetails = ({ match }) => {
const [products, setProducts] = useState({});
useEffect(() => {
storeProducts.map((product) => {
return product.title === match.params.id ? setProducts(product) : null;
});
}, []);
const { img, title, info } = products;
return (
<React.Fragment>
<div>
<p>{title}</p>
<img src={img} alt={title} />
<p>{info}</p>
</div>
</React.Fragment>
);
};
export default ProductDetails;回答 1
Stack Overflow用户
发布于 2020-04-18 04:30:51
是否确定析构的img属性包含值？
解构后可以console.log(img)
除此之外，我认为在UseEffect上选择产品会更好……
useEffect(() => {
const product = storeProducts.find((product) => product.title === match.params.id);
setProducts(product);
}, []);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61279846
复制相关文章
相似问题
腾讯云开发者
