我正在使用ZingChart直观地表示数据,但是当状态更改时,图表似乎没有更新。
我的图表配置非常简单:
//in constructor()
const { data } = props;
this.state = {
chartConfig: {
type: 'area',
series: [
{values: this.updateValues(data)}
]
}
};
updateValues()
返回将显示的值,它工作正常。
现在,当父组件发生更改时,它将发送一些新的道具,我将使用它们来设置新的状态:
componentDidUpdate(prevProps) {
if (this.props.data !== prevProps.data) {
const chartConfig = { ...this.state.chartConfig };
chartConfig.series[0].values = this.updateValues(this.props.data);
this.setState({ chartConfig });
console.log(this.state.chartConfig); //<--- state successfully updated
}
}
这是render方法,我首先检查状态是否已更新(因为setState是异步的),看起来还可以。
render() {
return (
<React.Fragment>
{this.state.chartConfig.series[0].values.length} {/* <--- state here is also up to date */}
<ZingChart data={this.state.chartConfig}/> {/* but not the chart */}
</React.Fragment>
);
}
现在的问题是状态更改时,图表无法直接更新(直到我强制刷新),那么可能是什么原因导致了此问题?他们在博客中说图表对组件的更改有反应,但事实并非如此。
谢谢!
答案 0 :(得分:0)
@adxl在您的代码中,componentDidUpdate
方法包含一个this.state.config
的扩展名。
const chartConfig = { ...this.state.chartConfig };
由于这实际上维护了对其内容的浅表引用,因此修改values数组将通过引用传递。如果您要深度克隆config对象,那么它将起作用。
const chartConfig = Object.assign({}, this.state.chartConfig);
此处的MDN文档-> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign