我正在尝试将数据放入我的状态,然后在配置变量中使用部分所述数据,这样我就可以将这些数据渲染到highCharts上。但是,我一直都会收到错误消息,说“"无法读取属性' SeriesDates'来自我的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
};
}
答案 0 :(得分:0)
如果仔细查看代码,则在安装组件后设置状态。根据反应组件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}`
}]
};
}
祝你好运。