在尝试在变量中使用所述数据时,如何在组件状态内部使用json数据无效?

时间:2017-01-05 01:00:39

标签: javascript json reactjs highcharts react-redux

我正在尝试将数据放入我的状态,然后在配置变量中使用部分所述数据,这样我就可以将这些数据渲染到highCharts上。但是,我一直都会收到错误消息,说“"无法读取属性' SeriesDates'来自我的json调用的任何其他数据的未定义等。但是,当我控制台登录状态时,数据显然处于状态。问题是为什么我不能在配置变量中使用它,我如何将它作为变量中的值?我能够轻松地使用来自我的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
  };
}

1 个答案:

答案 0 :(得分:0)

如果仔细查看代码,则在安装组件后设置状态。根据反应组件lifecycle componentDidMount在第一次渲染后触发。所以在渲染时你会有空图表状态。即this.state.chart.Data = undefined。所以你的代码this.state.chart.Data.SeriesDates会抛出上述错误。

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

有两种方法可以解决问题:

  1. 要将初始状态设置为某些默认值,请参考返回的数据格式

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

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

    祝你好运。