React拉取companies.json时报Cannot read properties of undefined (reading 'map')错

问题原因排查 #

1. 初始状态下companies为undefined #

你从Redux中获取companyList时，store内的companyList初始状态没有给companies设置默认空数组，组件首次渲染时，dispatch(listCompanies())异步请求还未执行完成拿到返回数据，此时companies为undefined，调用.map方法就会抛出该错误。

2. 子组件传参取值错误 #

父组件给BoxWithSearch传递的是company={company}对象，但子组件内直接读取props.name，取不到对应的值，即使map报错解决后复选框也会显示为空。

解决方案 #

第一步：给companies加兜底默认值 #

两种方案二选一即可：

• 解构时设置默认值
• 渲染时加可选链判断
  修改后父组件的关键代码：

// 解构时设置默认空数组
const { companies = [] } = companyList;

// 渲染时加可选链兜底，同时给遍历项加唯一key属性避免React告警
{companies?.map((company) => (
  <BoxWithSearch type={"companies"} company={company} key={company.slug} />
))}

第二步：修正BoxWithSearch的取值逻辑 #

从传入的company对象中读取name字段传给复选框：

// BoxWithSearch组件内修改Checkbox的传参
<CheckBox text={props.company.name} id={props.company.slug} />

第三步（可选）：校验Redux的初始状态 #

确认companyReducer的初始值设置正确，从根源避免undefined问题：

const initialState = {
  companies: [],
  loading: false,
  error: null
}

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