在反应 Z7490FE17CAEC373F228809D65B6EZ20E 中调用产品 object 时未定义 map function

Question

I am trying to display all my products from a fake api to my homescreen. I am using react redux to manage the state. When i console log the products object I get null so i dont think im getting anything from the call.

 import React, { useEffect } from 'react'; import Product from '../components/product'; import { useDispatch, useSelector } from 'react-redux'; import { listProducts } from '../actions/productActions'; export default function HomeScreen() { const dispatch = useDispatch(); const productList = useSelector(state => state.productList); const { products } = productList; useEffect(() => { dispatch(listProducts({})); },[dispatch]); return ( <div> <div className="row center"> {products.map((product) => ( <Product key={product.id} product={product}></Product> ))} </div> </div> ); }

 import { PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from "../constants/productConstants"; const productListReducer = ( state= {loading: true, products: [] }, action ) => { switch(action.type) { case PRODUCT_LIST_REQUEST: return{loading:true} case PRODUCT_LIST_SUCCESS: return {loading:false,products:action.payload} case PRODUCT_LIST_FAIL: return {loading:false,error:action.payload} default: return state } } export default productListReducer

Answer 1

Initialy products array is not defined, so you should add a condition like this

export default function HomeScreen() {
  const dispatch = useDispatch();
  const productList = useSelector(state => state.productList);
  const { products } = productList;
  useEffect(() => {
    dispatch(listProducts({}));
  },[dispatch]);
  return (
    <div>
      <div className="row center">
        {!!products && products.map((product) => (
          <Product key={product.id} product={product}></Product>
        ))}
      </div>
    </div>
  );
}