Redux开发HomeScreen产品列表报Cannot read properties of undefined (reading 'get')错误如何解决？

错误根因与修复方案 #

1. 直接报错原因：axios导入语法错误 #

你在productAction.js中对axios的导入写法错误：

// 错误写法
import { axios } from 'axios'

axios是默认导出的模块，不需要加解构大括号，修改为以下写法即可解决get方法未定义的报错：

// 正确写法
import axios from 'axios'

2. 潜在后续报错：数据结构不匹配 #

修复第一个问题后大概率会遇到第二个报错：Cannot read properties of undefined (reading 'map')，原因是reducer和action返回的数据结构不匹配：

• action中后端返回的data如果直接是产品数组，payload赋值为data后，reducer里取action.payload.products就会拿到undefined
• 对应修改方案二选一即可：
  • 方案A：修改productReducer.js中成功分支的取值逻辑：

    case PRODUCT_LIST_SUCCESS:
        // 去掉.products，直接取payload
        return {loading:false, products:action.payload}
    

  • 方案B：如果后端返回的确实是包含products字段的对象，保持现有代码即可，不需要额外修改。

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