useEffect更新useState存储的raceData后读取元素属性报错如何解决？

错误根因分析 #

• 你声明raceData状态时没有给useState传入初始值，所以首次渲染时raceData的值为undefined
• useEffect中发起的Axios请求是异步操作，会在组件首次渲染完成后才执行、拿到接口返回结果，因此首次渲染阶段执行console.log代码时，请求还没有返回，raceData还没有被赋值为接口返回的数组
• 此前打印raceData、raceData[0]时你看到的“正常”是浏览器控制台的懒加载特性导致的：控制台打印引用类型时默认只打印引用标记，你手动展开对象时请求已经完成、raceData已经被更新，所以能看到完整的内容，实际首次打印时raceData[0]确实是undefined，只是没有触发属性访问的报错而已

修复方案 #

1. 先给raceData设置初始值为空数组，避免基础访问报错：

const [raceData, updateRaceData] = useState([]);

2. 访问数组元素的属性前增加非空判断，推荐用ES2020新增的可选链运算符简化代码：

// 可选链写法，当raceData[0]为undefined/null时直接返回undefined，不会抛出错误
console.log(raceData[0]?.race);

// 也可以用传统条件判断写法
if (raceData.length > 0 && raceData[0]) {
  console.log(raceData[0].race)
}

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