Question

我正在尝试将数据放入我的状态，然后在配置变量中使用部分所述数据，这样我就可以将这些数据渲染到highCharts上。但是，我一直都会收到错误消息，说“＆＃34;无法读取属性＆＃39; SeriesDates＆＃39;来自我的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
  };
}

Answer 1

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

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

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

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

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

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

祝你好运。

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

1 个答案: