图表不随状态变化而更新

时间:2020-04-19 15:48:06

标签: javascript reactjs zingchart

我正在使用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>
    );
}

现在的问题是状态更改时,图表无法直接更新(直到我强制刷新),那么可能是什么原因导致了此问题?他们在博客中说图表对组件的更改有反应,但事实并非如此。

谢谢!

1 个答案:

答案 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