无法访问 JSON 对象数组中的元素答案

【问题标题】：Unable to access element from array of JSON objects无法访问 JSON 对象数组中的元素
【发布时间】：2018-08-17 03:16:11
【问题描述】：

我正在尝试访问 JSON 对象数组的特定元素。为了测试我只有：

{console.log(this.state.stockCharts)}

这会返回（在浏览器中）：

这很好，但现在我想访问特定元素。说第一个元素。我输入：

{console.log(this.state.stockCharts[0])}

浏览器就像：不，伙计

undefined

这可能很简单，但在过去的 45 分钟里，我一直用头撞键盘，但没有任何效果。谢谢大家！

编辑 1（对于 Akrion）

我用来访问 API 的查询是：

https://www.alphavantage.co/query?function=TIME_SERIES_WEEKLY&symbol=MSFT&apikey=demo

这是我从电话中得到的：

我调用了这个 API 两次，在收到响应后，我将它推送到我的 stockCharts 数组：

this.state.stockCharts.push(result)

编辑 2（初学者）

我会按照你通常的方式初始化状态：

this.state = {
        stockCharts: []
}

【问题讨论】：

你能JSON.stringify(this.state.stockCharts) 并发布输入吗？
那是 JSON 吗？喜欢 this.state.stockCharts[0]["Weekly Time Series"]？从来没有见过这样的键间隙。
能否请您同时{console.log(this.state.stockCharts,this.state.stockCharts[0])} 仅用于测试目的
@HemadriDasari 我调用了 api 两次，每次获取一个 JSON 对象并将该对象添加到 JSON 对象数组（stockCharts）中。我想将它们全部放在一个对象中并方便使用，从而推动状态 stockCharts
@Jacob 他们会弃用 componentWillMount() 似乎很奇怪，因为 IMO 是最有用的生命周期钩子。例如，这是我进行所有客户端身份验证和授权的地方，以确保必须允许用户在页面呈现之前访问它。您能否详细说明为什么它被弃用？

标签： javascript json reactjs

【解决方案1】：

我用本地提供的api验证，我能够获取数据。

不推荐将 api 响应推送到 stockCharts 的第一件事。这意味着不建议直接改变状态。

可以通过以下方式推送api响应

this.setState(prevState => ({
   stockCharts: [...prevState.stockCharts, result]
}));

现在在渲染中

render(){
   this.state.stockCharts.map((data, i) => {
      console.log("data", data); // this will give each object
      console.log("Meta Data", data["Meta Data"]); //This will give meta data information
      console.log("Weekly Time Series", data["Weekly Time Series"]);// this will print weekly time information
   });
   return(

   )
}

这是你的期望吗？

【讨论】：

好人，这行得通，我现在可以做类似console.log(this.state.stockCharts[0]["Meta Data"]) Cheers boss 之类的事情
NP。你也可以这样做，但由于它的对象数组我总是更喜欢使用 map 而不是 for 循环或直接使用索引位置访问。很高兴能帮到你:)

【解决方案2】：

这可能是因为你改变了不推荐的状态。尝试而不是调用this.state.stockCharts.push(result) 做this.setState({stockCharts: [...this.state.stockCharts, result]})

https://reactjs.org/docs/state-and-lifecycle.html

【讨论】：