在 componentWillReceiveProps 期间添加 Series 不起作用

Question

我在这方面已经有一段时间了，但我很困惑。我有一个 React 组件，它应该在收到道具时添加一个新系列，但是 chart.getChart().addSeries({ data: [1, 2, 3, 4] }) 没有在我的图表中显示新系列。但是，我还向 onClick 添加新系列的组件添加了一个按钮，这确实有效......下面是我的代码：

const config = {
  title: {
    text: 'Hello, World!'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
}
@autobind class SampleChart extends Component {
  componentWillReceiveProps({ data }) {
    if(data.length > 0) {
      this.chart.getChart().addSeries({data: [39.9, 81.5, 116.4, 229.2, 124.0, 174.0, 235.6, 138.5, 116.4, 94.1, 195.6, 54.4]}, false)
      this.chart.getChart().redraw()
    }
  }

  addSeries() {
    this.chart.getChart().addSeries({data: [39.9, 81.5, 116.4, 229.2, 124.0, 174.0, 235.6, 138.5, 116.4, 94.1, 195.6, 54.4]}, false)
    this.chart.getChart().redraw()
  }

render() {
    return(
      <div>
        <ReactHighcharts ref={(ref) => this.chart = ref} config={config} />
        <button onClick={this.addSeries}>add series</button>
      </div>
    )
  }
}
export default SampleChart

顺便说一句，我确实传递了 if(data.length > 0) 语句，而且每当我将一组新的道具传递给我的组件时，我都会遇到这个问题。所以这不是组件安装问题（至少我不认为是）。想知道为什么会这样吗？

Answer 1

我明白发生了什么事。对于后代来说，这里是你如何修复它的：

本质上错误的是 componentsWillReceiveProps() 触发了渲染，我认为 this.chart.getChart().redraw() 没有时间重新绘制渲染。所以我补充说：

componentShouldUpdate() {
  return false
}

成功了！由于组件不呈现并且图表只是重绘。然而，让整个考验变得非常混乱的是，如果你 setData() 即使没有 componentShouldUpdate()，图表也会重新绘制和更新。

Here 您可以看到当 componehtShouldUpdate() 存在和不存在时这两种情况（setData() 和 addSeries()）如何反应的示例。

在 componentWillReceiveProps 期间添加 Series 不起作用

Adding Series during componentWillReceiveProps does not work

javascript

highcharts

reactjs

react-highcharts

react-component