変数内で前記データを使用しようとすると、コンポーネント内のjsonデータを無効にするにはどうすればよいですか？

Question

私は自分の状態に置いたデータを取得し、そのデータの一部をconfig変数に使用して、このデータをhighChartsにレンダリングできるようにしようとしています。しかし、私は "私のjson呼び出しから他のデータの未定義のプロパティ '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

のためにあなたは、状態を設定している。最初のようにします。レンダリング後lifecycle componentDidMountがトリガーに反応部品によればレンダリングの時間は空のチャートの状態になります。すなわちthis.state.chart.Data = undefinedです。あなたのコードthis.state.chart.Data.SeriesDatesは上記のエラーをスローします。

注：サーバーからデータをフェッチするには時間がかかるため、ロジックをcomponentWillMountに入れても、サーバーからデータをフェッチするため、同じエラーが発生します。

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

を返されるデータのフォーマットを参照するいくつかのデフォルト値に初期状態を設定するには

1. ：

   問題を解決するには、2つの方法があるかもしれません

   OR 2. renderメソッドで未定義がないかどうかを確認します。

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

   幸運。