使用ZingChart时状态变更图表不更新的问题求助

我之前也碰到过一模一样的情况，问题出在你更新chartConfig的方式上——虽然你修改了series[0].values，但series数组本身的引用没有发生变化，ZingChart内部的更新机制可能依赖于数组/对象的引用变化来触发重绘，所以没检测到深层的数据更新。

问题分析 #

你当前的代码是浅拷贝chartConfig后，直接修改原series数组里的元素：

const chartConfig = { ...this.state.chartConfig };
chartConfig.series[0].values = this.updateValues(this.props.data);

这里chartConfig.series还是原来的数组引用，React的diff算法或者ZingChart的内部校验，都可能忽略这种深层属性的变化，导致图表没有重新渲染。

解决方案 #

你需要创建一个全新的series数组，确保引用完全更新，这样ZingChart才能识别到数据变化并自动刷新。修改componentDidUpdate里的代码如下：

componentDidUpdate(prevProps) {
  if (this.props.data !== prevProps.data) {
    this.setState(prevState => ({
      chartConfig: {
        ...prevState.chartConfig,
        // 生成新的series数组，替换原有数据
        series: [ { values: this.updateValues(this.props.data) } ]
      }
    }));
  }
}

如果你的图表有多个series需要保留，也可以用展开运算符生成新数组：

componentDidUpdate(prevProps) {
  if (this.props.data !== prevProps.data) {
    this.setState(prevState => ({
      chartConfig: {
        ...prevState.chartConfig,
        series: [
          // 替换第一个series，保留其他series
          { values: this.updateValues(this.props.data) },
          ...prevState.chartConfig.series.slice(1)
        ]
      }
    }));
  }
}

更简洁的优化方案 #

其实你完全可以不用把chartConfig存在state里，直接在render方法中根据当前props.data生成配置，这样每次props变化时都会自动生成新的chartConfig，ZingChart自然会更新，还能省去手动处理状态更新的逻辑：

render() {
  const chartConfig = {
    type: 'area',
    series: [ { values: this.updateValues(this.props.data) } ]
  };
  return (
    <React.Fragment>
      {chartConfig.series[0].values.length}
      <ZingChart data={chartConfig}/>
    </React.Fragment>
  );
}

内容的提问来源于stack exchange，提问作者adxl