React+Redux项目渲染时报Cannot read properties of undefined (reading 'map')如何解决？

错误原因&修复方案 #

1. 修复axios导入错误 #

你的productAction.js中axios导入语法错误，axios是默认导出不能用解构接收，将第一行代码：

import { axios } from 'axios'

改为：

import axios from 'axios'

2. 统一action和reducer的传值逻辑 #

你在action的成功回调中将接口返回的完整data作为payload传入reducer，但reducer中取的是action.payload.products，如果你的后端接口/api/products/直接返回商品数组，此时products会被赋值为undefined，调用map方法就会触发第28行的报错。
根据你的后端返回格式二选一修改即可：

• 若后端直接返回商品数组：修改productReducer.js中PRODUCT_LIST_SUCCESS分支的代码为

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

• 若后端返回格式为{products: [商品数组]}的对象：保持reducer不变，修改action中成功回调的payload赋值为

  dispatch({
      type:PRODUCT_LIST_SUCCESS,
      payload:data.products
  })
  

可选优化 #

可以在HomeScreen调用map前加可选链判断，避免异常情况报错：

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

另外需要确认你在store配置中，已经将productListReducers挂载到了productList字段下，和你useSelector(state=>state.productList)的取值路径对应。

内容的提问来源于stack exchange，提问作者kunal