react d3图形错误

我有两个图形，一个是通过调用一个API并通过操作数据来获取数据和另一个数据。react d3图形错误

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

这两种成分相同的代码，但他们中的一个不工作。

这里有什么问题？

来源

2017-08-29 Aayushi

在这行你得到这个错误？ – Dekel

在loadData（）的catch函数中，我得到的错误无法读取undefined的属性映射。 @Dekel – Aayushi

你确定'map'是在函数内部而不是其他地方？我在你的代码中看到的唯一'map'是'keysArr.map'，显然'response.data ['Time Series（Daily）']'不是未定义的。有没有机会它不是一个对象？提供您拥有的数据。 – Dekel

如您所述，您需要按照您的图管理状态，它的BarChart组件中需要有value和label字段。像下面的东西。

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

另一种方式更好，你可以这样做：

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

来源

2017-08-31 18:21:06

react d3图形错误

回答

相关问题