尝试在变量中使用上述数据时，如何在组件状态无效的内部使用json数据？

Question

我试图将放入的数据放入状态，然后在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
  };
}

Answer 1

如果仔细查看代码，则在安装组件后将设置状态。 根据react组件的生命周期， componentDidMount在第一个渲染之后触发。 因此在渲染时，您将具有空的图表状态。 即this.state.chart.Data = undefined 。 因此您的代码this.state.chart.Data.SeriesDates将引发以上错误。

注意：由于即使您将逻辑放在componentWillMount中，也要从服务器中获取数据，由于从服务器中获取数据需要花费时间，因此也会遇到相同的错误。

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

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

   this.state = {chart: { Data: { SeriesData: {}, close: {}, ... } } };

或者2.在render方法中检查undefined。

    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}`
      }]
    };
    }

祝好运。