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

Posted 2023-02-22

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

【英文标题】：Error: Cannot read properties of undefined (reading 'map') in reactjs project \错误：无法在 reactjs 项目中读取未定义的属性（读取“地图”）\

【发布时间】：2021-12-31 06:31:00

【问题描述】：

主屏幕 在线错误/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'

【问题讨论】：

对于const data = await axios.get('http://127.0.0.1:8000/api/products/')，data 有 products 属性吗？在访问有效负载 action.payload.products 时，您似乎假设它在 PRODUCT_LIST_SUCCESS 的减速器中执行。您能否更新您的问题，包括 data 值？

redux 开发工具怎么说？

【参考方案1】：

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

【讨论】：

请检查并告诉我发生了什么

如果products 是 length: 2 ，这段代码仍然会失败。这个答案并没有真正解决问题。

是的，我知道，但我想知道出了什么问题？

你的意思是像评论要求澄清吗？