我试图在遍历对象数组列表后渲染图像

Question

我正在循环一个数组，它是一个对象列表。在对象中，我有关于电话的信息，例如：标题、信息、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;

Answer 1

您确定被破坏的img 属性包含值吗？

解构后可以console.log(img)

除此之外，我认为最好以这种方式在UseEffect 上选择产品...

 useEffect(() => {
  const product = storeProducts.find((product) => product.title === match.params.id);
  setProducts(product);
  }, []);