对象数组的访问状态

Question

如果这是一个基本问题，我很抱歉，但我真的很困惑为什么这不起作用。我有一个组件，它通过API调用来获取数据，并且数据成功返回，我可以执行console.log并看到我期望的对象数组。

.then((result) => {
this.setState({
surveyData: result,
surveyYear: result[0].year
});
console.log(result); <--- This logs an array of objects as expected
console.log(this.state.surveyData); <-- This logs an empty array
console.log(this.state.surveyYear); <-- This logs what I expect
})

当我使用return组件时，我得到了我所期望的:

render(){
return(
<p>{this.state.surveyYear}</p> <--- this shows exactly what I'd expect
)
}

但是，如果我做下面，它应该显示完全相同的数据，但相反，我得到这个错误:TypeError: Cannot read properties of undefined (reading '0')是可能这样做吗?

render(){
return(
<p>{this.state.surveyData[0].year</p> <---  I want to access the data this way instead 
)
}

Answer 1

这是react中一个常见的陷阱。问题是状态的更新不是即时的。这就是为什么在调用setState之后您的数据还没有在那里。类似地，在渲染方法中，你需要防止数据还不可用。

如果您使用babel代码并支持可选的链接操作符:

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

否则

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