Я пытаюсь сделать изображение после просмотра списка массивов объектов.

Question

Я перебираю массив, представляющий собой список объектов. В объектах у меня есть информация о телефоне, такая как: title, info, img, company et c ...

Когда я впервые просматривал массив, я смог получить все детали, включая изображения и отображаются на экране. Затем я устанавливаю ссылку для каждого списка, и когда вы нажимаете на нее, вы переходите к компоненту сведений о продукте, который отображает всю информацию об этом продукте.

Проблема, с которой я сейчас сталкиваюсь, заключается в Компонент 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);
  }, []);