×获取TypeError：无法读取未定义的属性“ map”

Question

I'm using react to build the front end and am trying to diaplay a list of products.

I am getting a type error of map undefined whenever I run the code.

I thought I had declared it already using this.

const productList = useSelector(state => state.productList);
const {products, loading, error} = productList;



  return loading ? <div>Loading...</div>:
  error ? <div>{error}</div>:
     <ul class = "products">
    { products.map(product =>
          <li key={product._id}>
            <div className="product">
            <Link to={'/product/' + product._id}>
            <img className="product-image" src={product.image} alt="Monkey light"/>
            </Link>
               <div className="product-heading">
                <Link to={'/product/' + product._id}>{product.name}</Link>
                </div>
               <div className="product-brand">{product.brand}</div>
               <div className="product-price">{product.price}</div>
               <div className="product-rating">{product.rating} {product.numReviews}</div>
              </div>
          </li>
       )}
    </ul>
    }

The productList is defined within the function.

Answer 1

I'm using react to build the front end and am trying to diaplay a list of products.

I am getting a type error of map undefined whenever I run the code.

I thought I had declared it already using this.

const productList = useSelector(state => state.productList);
const {products, loading, error} = productList;



  return loading ? <div>Loading...</div>:
  error ? <div>{error}</div>:
     <ul class = "products">
    { products.map(product =>
          <li key={product._id}>
            <div className="product">
            <Link to={'/product/' + product._id}>
            <img className="product-image" src={product.image} alt="Monkey light"/>
            </Link>
               <div className="product-heading">
                <Link to={'/product/' + product._id}>{product.name}</Link>
                </div>
               <div className="product-brand">{product.brand}</div>
               <div className="product-price">{product.price}</div>
               <div className="product-rating">{product.rating} {product.numReviews}</div>
              </div>
          </li>
       )}
    </ul>
    }

The productList is defined within the function.