Javascript 当试图在变量中使用所述数据时，如何在组件状态invalid中使用json数据？

我试图将我放置的数据带入我的状态，然后在config变量中使用所述数据的一部分，这样我就可以将这些数据呈现到highCharts上。然而，我一直在说这个错误“无法从我的json调用中读取任何其他数据的undefined等的属性'SeriesDates'。但是，当我记录状态时，数据显然处于该状态。问题是为什么我不能在config变量中使用它，以及如何在变量中获取它作为值？我能够轻松地使用redux状态中的数据（{this.props.stock.Name}），但对于json调用的输出，情况并非如此

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactHighcharts from 'react-highcharts';

class StockChart extends Component {
  constructor(props) {
    super(props);

    this.state = {chart: []};
  }

  componentDidMount() {
    this.ChartData();
  }

  ChartData() {
    return $.getJSON(`http://dev.markitondemand.com/MODApis/Api/Timeseries/json?symbol=${this.props.stock.Symbol}`)
      .then((data) => {
        var raw = JSON.stringify(data);
        var json = JSON.parse(raw);
        this.setState({ chart: json });
        console.log(this.state);
      });
  }

  render() {

    const config = {
      title: {
          text: `${this.props.stock.Name}`,
          x: -20 //center
      },
      subtitle: {
          text: `${this.props.stock.Symbol}`,
          x: -20
      },
      xAxis: {
          categories: `${this.state.chart.Data.SeriesDates}`
      },
      yAxis: {
          title: {
              text: 'Price'
          },
          plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
          }]
      },
      tooltip: {
          valueSuffix: '$'
      },
      series: [{

          name: 'AAPL',
          data: `${this.state.chart.Data.close.values}`
      }]
    };

    if (!this.props.stock) {
      return <div></div>
    }

    return (
      <div>
        <ReactHighcharts config={config}></ReactHighcharts>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    stock: state.selectedStock
  };
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react highcharts”导入react highcharts；
类StockChart扩展组件{
建造师（道具）{
超级（道具）；
this.state={chart:[]}；
}
componentDidMount（）{
这是ChartData（）；
}
图表数据（）{
返回$.getJSON(`http://dev.markitondemand.com/MODApis/Api/Timeseries/json?symbol=${this.props.stock.Symbol}`）
。然后（（数据）=>{
var raw=JSON.stringify（数据）；
var json=json.parse（原始）；
this.setState（{chart:json}）；
console.log（this.state）；
});
}
render（）{
常量配置={
标题：{
文本：`${this.props.stock.Name}`，
x:-20/中心
},
副标题:{
文本：`${this.props.stock.Symbol}`，
x:-20
},
xAxis：{
类别：`${this.state.chart.Data.SeriesDates}`
},
亚克斯：{
标题：{
文字：“价格”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
valueSuffix:“$”
},
系列：[{
名称：“AAPL”，
数据：`${this.state.chart.data.close.values}`
}]
};
如果（！this.props.stock）{
返回
}
返回(
);
}
}
函数MapStateTops（状态）{
返回{
股票：state.selectedStock
};
}

如果仔细查看代码，您将在安装组件后设置状态。根据反应组件componentDidMount在第一次渲染后触发。因此，在渲染时，图表状态为空。i、 e.

this.state.chart.Data=未定义

。因此，您的代码

this.state.chart.Data.SeriesDates

将抛出上述错误

注意：由于您正在从服务器获取数据，即使您将逻辑放入componentWillMount，它也会发生相同的错误，因为从服务器获取数据需要时间

有两种方法可以解决这个问题：

将初始状态设置为参考返回数据格式的一些默认值

this.state={图表：{
数据：{
序列数据：{}，
关闭：{}，
...
}
}
};

或 2.检查渲染方法中是否存在未定义的

    const Data = this.state.chart.Data;
    if(Data){
    const config = {
      title: {
          text: `${this.props.stock.Name}`,
          x: -20 //center
      },
      subtitle: {
          text: `${this.props.stock.Symbol}`,
          x: -20
      },
      xAxis: {
          categories: `${this.state.chart.Data.SeriesDates}`
      },
      yAxis: {
          title: {
              text: 'Price'
          },
          plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
          }]
      },
      tooltip: {
          valueSuffix: '$'
      },
      series: [{

          name: 'AAPL',
          data: `${this.state.chart.Data.close.values}`
      }]
    };
    }

---

祝您好运。

尽管您的答案是正确的，但为了清楚起见，如果他在react生命周期中尝试在

render

之前将抓取移动到函数，应用程序将失败，因为他正在异步检索数据。因此，在这种情况下，生命周期实际上是不相关的。通常，数据获取是在componentWillMount中完成的，因为它是在呈现之前触发的。是的，在这种情况下，它似乎无关紧要，因此我们必须通过这两种解决方案中的任何一种。是和否。将其移动到

组件将挂载

并不重要，因为数据获取是异步的，对

this.setState的调用无论如何都很可能在第一次渲染后被调用。是的，您的解决方案将是解决此问题的唯一方法。由于您已经在使用Redux，我会将图表数据移动到全局Redux状态，因此您的组件不关心如何获取数据的细节。