reactjs 为什么我的数组在控制台上返回undefined?

ccrfmcuu  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(165)
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上说它没有定义。

qij5mzcb

qij5mzcb1#

因为第一次未定义时应该检查类型

{productDetails.product_image?.map((image, index) => {
   // ...
})}

或将其初始化为空数组

const [productDetails, setProductDetails] = useState([]);

希望这能有所帮助!

相关问题