时间戳

首页 > 解决方案 > 访问包含对象数组的状态

reactjs - 访问包含对象数组的状态

问题描述

如果这是一个基本问题，我深表歉意，但我真的很困惑为什么这不起作用。我有一个组件可以调用 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 
 )
}

标签： reactjs

解决方案

这是反应中的一个常见陷阱。问题是更新状态不是即时的。这就是为什么在调用setState. 同样，在 render 方法中，您需要防止该数据尚不可用。

如果您 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>)
}

推荐阅读