无法读取React应用程序中未定义的属性“products”

Question

对于我的web应用程序，我收到错误信息无法读取未定义的属性'products‘。该属性的代码如下所示

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>
  );
}