错误：无法在 reactjs 项目中读取未定义的属性（读取“地图”）\

Question

主屏幕 在线错误/frontend/src/screens/HomeScreen.js:28

我想使用 redux 对我的 HomeScreen 页面的状态执行操作。数据从 api（项目数组）提供，然后呈现在屏幕上。毕竟这显示网站说上面的错误。

productReducer.js

import { 
PRODUCT_LIST_REQUEST,
PRODUCT_LIST_SUCCESS,
PRODUCT_LIST_FAIL,

PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS,
PRODUCT_DETAILS_FAIL,


} from '../constants/productConstants'

export const productListReducers=(state= { products:[] },action)=>{
    switch(action.type)
    {
        case PRODUCT_LIST_REQUEST:
            return { loading:true, products:[]}

        case PRODUCT_LIST_SUCCESS:
            return {loading:false, products:action.payload.products}

        case PRODUCT_LIST_FAIL:
            return {loading:false,error:action.payload}

        default:
            return state
    }

}

productAction.js

import { axios } from 'axios'
import { 
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL,

    PRODUCT_DETAILS_REQUEST,
    PRODUCT_DETAILS_SUCCESS,
    PRODUCT_DETAILS_FAIL 
} from '../constants/productConstants'

export const listProducts=()=>async(dispatch)=>{ 
    try
    {
        dispatch({type:PRODUCT_LIST_REQUEST})
        const { data }= await axios.get('http://127.0.0.1:8000/api/products/')
        dispatch({
            type:PRODUCT_LIST_SUCCESS,
            payload:data
        })
    }
    catch(error){
        dispatch({
            type:PRODUCT_LIST_FAIL,
            payload:error.response && error.response.data.message ? error.response.data.message: error.message,
        })
    }

}

HomeScreen.js

import React, {useState, useEffect} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col } from 'react-bootstrap'
import Product from '../components/Product'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { listProducts } from '../actions/productActions'

function HomeScreen() {
    
    const dispatch = useDispatch()
    const productList=useSelector(state=>state.productList)
    const { error, loading, products}=productList
    
    useEffect(()=>{
        
         dispatch(listProducts())  
    },[dispatch])
   
    return (
        <div>
            <h1>Latest Products</h1> 
            {loading ? <Loader /> 
                : error ?  <Message variant='danger'>{error}</Message> 
                : 
                (
                    <Row>
                        {products.map(product=>(
                            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                                <Product product={product}/>
                            </Col>
                        ))}
                    </Row>
                )
                
            }          
            
        </div>
    )
}

export default HomeScreen

productConstant.js

export const PRODUCT_LIST_REQUEST='PRODUCT_LIST_REQUEST'
export const PRODUCT_LIST_SUCCESS='PRODUCT_LIST_SUCCESS'
export const PRODUCT_LIST_FAIL='PRODUCT_LIST_FAIL'

Answer 1

  {products?.length && products.map(product=>(
      <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
         <Product product={product}/>
      </Col>
   ))}