React+Redux访问数组数据时报Cannot read properties of undefined (reading '0')错如何解决

问题原因 #

这个报错是组件首次渲染时Redux中aboutData还未完成异步赋值导致的：

• Redux中aboutGet的初始状态里，aboutData默认值为undefined，你发起的获取数据的异步请求还没返回结果时，组件就已经执行了访问aboutData[0]的逻辑，所以抛出空指针错误
• 控制台能看到完整的aboutData数组，是因为浏览器控制台打印的引用类型数据是懒加载的，你点开查看时异步请求已经完成，数据已经被更新到Redux状态里了，和代码执行时的状态不一致。

修复方案 #

1. 首先修正Redux中aboutGet模块的初始状态，给aboutData设置默认值为空数组：

// aboutGet reducer的初始状态修改示例
const initialState = {
  loading: false,
  error: null,
  aboutData: [] // 这里默认设为空数组，不要留成undefined
}

2. 访问数据时使用可选链操作符做安全校验，避免空指针报错：

// 可选链会在前面的值为undefined/null时直接返回undefined，不会抛出错误
const aboutId = aboutData?.[0]?._id;
console.log(aboutId);

3. 也可以结合loading状态做逻辑分支判断，仅在数据加载完成后再处理数据：

if (loading) {
  // 加载中逻辑，比如渲染加载提示
  return <div>加载中...</div>
}
if (error) {
  // 错误处理逻辑
  return <div>数据加载失败</div>
}
// 走到这里说明数据已经加载完成，可以安全访问
const aboutId = aboutData[0]._id;

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