Не удается прочитать свойство 'products' из неопределенного в приложении React

Question

Я получаю ошибку. Невозможно прочитать свойство 'products' undefined для моего веб-приложения. код объекта указан ниже

import React from 'react';
import ProductItem from '../product-item/ProductItem';
import Title from '../../common/Title';
import { useProductState } from '../../../global-state';

export default function ProductList() {
  // Accessing productState
  const { productState } = useProductState();
  const { products } = productState;
  let productItems = products.map(product => (
    <ProductItem key={product.id} product={product} />
  ));
  return (
      <div className="py-5">
        <div className="container">
          <Title name="Our" title="Menu" />
          <div className="row">{productItems}</div>
        </div>
      </div>
  );
}

Answer 1

Может быть, вы получаете данные из некоторых API? Если это так, может быть, когда ProductList продукты монтирования еще не получены. Попробуйте это:

export default function ProductList() {
  // Accessing productState
  const { productState } = useProductState();
  const { products } = productState;

  if(!products) { // if products initial value is an empty array use !products.length
    return <div>Loading</div>
  }

  let productItems = products.map(product => (
    <ProductItem key={product.id} product={product} />
  ));

  return (
      <div className="py-5">
        <div className="container">
          <Title name="Our" title="Menu" />
          <div className="row">{productItems}</div>
        </div>
      </div>
  );
}