React中Uncaught TypeError: 无法读取undefined的map属性求助

算力阿峰

2026-8-21

修复Redux中products.map的undefined错误

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'map')错误，核心原因是Redux reducer里的状态属性名拼写不一致：

在productReducers.js中，初始状态定义的是复数形式的products:[]，但在处理PRODUCT_LIST_REQUEST和PRODUCT_LIST_SUCCESS动作时，返回的状态里却用了单数形式的product，而组件HomeScreen.js中解构的是复数的products，这就导致组件始终拿不到正确的数组数据，products变成undefined，进而无法调用map方法。

修复步骤

修改productReducers.js中的状态属性名，统一使用复数products：

import {
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL
} from '../constants/productConstants'


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

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

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