d3グラフエラーに反応する

Question

私は2つのグラフを作成しています.1つは、apiを呼び出し、そのデータを操作して、もう一方は、そのデータを操作することです。

import React, { Component } from 'react'; 
import * as d3 from 'd3'; 
import * as ReactD3 from 'react-d3-components'; 
import propTypes from 'prop-types'; 
var axios=require('axios'); 
var BarChart=ReactD3.BarChart; 
var PieChart=ReactD3.PieChart; 

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state={ 
     data:[], 
     label:'Monthly Dates', 
     label1: 'test', 
     values:[], 
     abc: [], 
     x:'', 
     y:'' 
    } 
    } 

    componentDidMount(){ 
    this.loadData();  
    } 

    loadData(){ 
     var me=this; 
     axios({ 
      method:'GET', 
      url:'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=SPY&apikey=2QEL3WC4KITIBISR', 
     }).then(function(response){ 
      const values=[]; 
      if(response && response.data && response.data['Time Series (Daily)']){ 
      Object.keys(response.data['Time Series (Daily)']).forEach((keys)=>{ 
       if (keys) { 
       const pointValue={ 
        x:String(keys), 
        y:Number(response.data['Time Series (Daily)'][keys]['4. close']) 
       } 
       values.push(pointValue); 
       } 
      }) 
      me.setState({ 
       values: values 
      }); 
      } 
      me.getHistogramData(response); 

     }).catch(function(error){ 
      console.log(error); 
     }) 
    } 

    getGraphData(){ 
     const {label,values} = this.state; 
     return [{label,values}]; 
    } 

    test() { 
     if(this.state.abc.length){ 
     const {label1,abc} = this.state; 
     return [{label1,abc}]; 
     } 
     return null; 
    } 

    getHistogramData(response){ 
     var diff=0; 
    if(response && response.data && response.data['Time Series (Daily)']){ 
     const diffValue=[]; 
     var keysArr = Object.keys(response.data['Time Series (Daily)']); 
     var oldObj = 0; 
     keysArr.map((eachObj) => { 
      var newObj = response.data['Time Series (Daily)'][eachObj]['4. close']; 
      var diff = newObj - oldObj; 
      console.log("Difference: ", diff); 
      oldObj = newObj; 
      const values1={ 
      x:'abc', 
      y: 1 
      } 
      diffValue.push(values1); 
     }) 

     this.setState({ 
      abc: diffValue 
     }); 
    } 
    } 

    renderGraph(){ 
    if((this.state.values && this.state.values.length) || (this.state.abc && this.state.abc.length)){ 
     return(
     <div> 
      <BarChart data={this.getGraphData()} width={17000} height={500} margin={{top:10,bottom:80,left:30,right:30}}/> 
      <BarChart data={this.test()} width={17000} height={500} margin={{top:10,bottom:80,left:30,right:30}}/> 
     </div> 
     ) 
    } 
    } 

    render() { 

    return (
     <div> 
     {this.renderGraph()} 
     </div> 
    ) 
    } 
} 

App.propTypes={ 
    values:React.PropTypes.array, 
    xScale:React.PropTypes.number, 
    width:React.PropTypes.number 
} 

export default App; 

最初のグラフは関数getGraphData（でプロット取得しながら）、他方はありません。

コードが実行されます、私はエラー

TypeError: Cannot read property 'map' of undefined

それは、両方のコンポーネントの同じコードだが、それらのいずれかが動作しません取得します。

ここで何が間違っていますか？

Answer 1

BarChartコンポーネントには、valueとlabelのフィールドが必要です。あなたのグラフごとに状態を管理する必要があります。以下のようなもの。より良い

state = { 
    graph1: { 
    label: 'Monthly Dates', 
    values: [], 
    }, 
    graph2: { 
    label: 'Days', 
    values: [], 
    }, 
}; 

別の方法は、あなただけ行うことができます。

test() { 
    const { label1, abc } = this.state; 
    return [{ label: label1, values: abc }]; 
}