React访问存储对象数组的state时报Cannot read properties of undefined错误咨询

访问方式可行性说明 #

通过this.state.surveyData[0].year的方式直接访问数据是完全可行的，报错并非是该写法本身存在问题。

报错原因 #

• React的setState是异步批量更新的操作，调用setState后状态不会立刻更新，所以你在setState后直接打印this.state.surveyData拿到的还是更新前的旧值（空数组）。
• 组件首次渲染时，API请求还未返回结果，初始状态中的surveyData是空数组，此时访问surveyData[0]会得到undefined，再尝试读取undefined的year属性就会抛出类型错误。

补充说明：直接渲染this.state.surveyYear不会报错的原因是，初始状态下surveyYear如果是空值（比如undefined、空字符串），React可以正常渲染空内容，等请求完成状态更新后即可正常显示，不会中断渲染抛出错误。

解决方法 #

你可以选择以下任意一种方案解决：

1. 使用可选链语法兼容空值场景（React 16.14及以上版本支持）：

render(){
   return(
        <p>{this.state.surveyData?.[0]?.year}</p>
 )
}

如果数据未加载完成，该写法会自动返回undefined，不会抛出错误。

2. 加条件判断做兼容渲染：

render(){
   const { surveyData } = this.state
   return(
        <p>{surveyData.length ? surveyData[0].year : '加载中'}</p>
 )
}

只有当数组存在有效内容时才会访问下标属性，否则显示加载提示。

3. 新增加载状态控制渲染流程：
   首先在初始state中添加加载状态：

this.state = {
  surveyData: [],
  surveyYear: '',
  isLoading: true
}

请求完成后更新加载状态：

.then((result) => {
  this.setState({
      surveyData: result,
      surveyYear: result[0].year,
      isLoading: false
  });
})

render中根据加载状态判断渲染内容：

render(){
   const { isLoading, surveyData } = this.state
   if(isLoading) return <p>数据加载中...</p>
   return(
        <p>{surveyData[0].year}</p>
 )
}

额外提示：如果需要在setState更新完成后拿到最新的状态，可以使用setState的第二个回调参数，在回调中读取的state才是更新后的最新值：

this.setState({ surveyData: result }, () => {
  console.log(this.state.surveyData) // 可以拿到更新后的数组
})

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