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圖形錯誤

回答

相關問題