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);
  }, []);

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

1 个答案: