将数组传递给状态后无法访问数组，但之前可以访问答案

【问题标题】：Can't access array after passing it to state, but can access it before将数组传递给状态后无法访问数组，但之前可以访问
【发布时间】：2020-07-10 03:20:43
【问题描述】：

我的状态中有一个伪对象。我已经能够通过几层访问，但是当我到达对象内部的数组时，我得到了未定义的错误。

更新：我如何将 lambdaReturnObject 传递给不允许我访问数组的状态有问题，使用 lambdaReturnObject.campaigns[0].campaignName 进行了测试，它有效。

handleSearch() {
    //data to use to query backend
    let campaignId = this.refs.campaignInput.value
    let marketplace = this.refs.marketplaceInput.value

    //using local copy of backend data, production should call backend fo this instead
    let lambdaReturn = "{\"advertiser\":{\"advertiserId\":\"1\",\"enforcedBudget\":0.1},\"campaigns\":[{\"campaignID\":\"1\",\"campaignName\":\"fake\",\"createDate\":11111,\"creationDate\":1111,\"startDate\":1111,\"endDate\":1111,\"dailyBudget\":0.1,\"internal\":{\"budgetCurrencyCode\":\"USD\",\"inBudget\":true},\"enforcedBudget\":0.1,\"budgetCurrencyCode\":\"USD\",\"budgetPacingStrategy\":\"asp\",\"budgetType\":\"averageDaily\",\"status\":\"enables\",\"internalStatus\":\"enabled\"}],\"campaignID\":\"1\"}"
    let lambdaReturnObject = JSON.parse(lambdaReturn)

    this.setState({
      apiData: lambdaReturnObject
    })
  }

当我尝试进入里面的数组时，我得到以下错误

<h3>Campaigns :{console.log(this.state.apiData.campaigns[0].campaignName)}</h3>

Cannot read property '0' of undefined

这意味着我以错误的方式访问它，但我查看了其他帖子 (Accessing Object inside Array)，我认为这是正确的。虽然我肯定错了，否则我不会写这个。

【问题讨论】：

你能提供你的调用代码以从 api 获取吗？这听起来像是一个异步问题。
对 api 的提取只是一个我使用 JSON.parse 的字符串，我实际上并没有调用后端，但它会是相同的 JSONString，让我将它添加到问题中
鉴于您的代码，我不知道问题可能是什么。这一切看起来应该可以工作。我至少可以确认campaigns[0] 绝对是您访问campaigns 数组中第一项的方式。
我打电话给lambdaReturnObject.campaigns[0].campaignName，它成功了。所以我在设置状态时做错了apiData: lambdaReturnObject

标签： javascript arrays json

【解决方案1】：

JSON.parse() 是同步函数，所以设置状态不会被调用，直到 JSON.parse() 执行完毕并返回对象。

还是可以试试关注

使用如下所示的 try-catch 块调用 JSON.parse() 并查看它是否有效。它也是解析字符串化对象的无错误方式。

试试{ 让 lambdaReturnObject = JSON.parse(lambdaReturn) 这个.setState({ apiData: lambdaReturnObject })对象
} 抓住（错误）{ // 在这里做错误处理。 }
使用可选链接，并尝试访问您的对象，如this.state.apiData.campaigns?.[0].campaignName；即使 compaigns 未定义，这也不会出错。

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

【讨论】：

哇，最后一个带有可选链接的东西使它工作了，谢谢！但是我在问题中添加了更多信息，因此也可能指向原始问题，如果在设置状态时无法解决，我将使用这种方式。

【解决方案2】：

取决于正在发生的事情。获取活动 [0] 的调用在 API 调用完成之前得到解决。您可以尝试使用 promise 或 async await 以确保在尝试访问对象之前从 API 调用中检索到该对象。

您是否碰巧有一个代码 sn-p 用于获取数据？

【讨论】：

对不起，另一个评论也问了，我只是添加了我现在如何获取对象

【解决方案3】：

错误是render() 在页面启动时正确调用。当时该对象未存储在我的状态中，因此尝试调用

this.state.objects.innerObject.property

会失败，因为我在我的状态中声明了对象，innerObject 可以在对象实际加载之前被计为 null，因此它不会引发错误。但是属性会抛出错误，因为我们知道 innerObject 为空。

通过在渲染页面之前使用 if 语句进行修复，以查看是否实际加载了对象。如果不渲染，则仅渲染默认的空 JSX。

【讨论】：