javascript - 当状态在React中更改时，HighCharts不会更新

我正在开发一个快速程序，该程序从酶反应中获取数据并将其绘制成图表。我遇到了这个问题，如果我在道具中向其传递数据，highcharts组件将不会更新。我可以看到控制台中处于状态的数据正在更改，但图表上没有任何显示。

Graph组件：

class HighGraph extends Component {
  state = {
    title: {
      text: "My chart"
    },
    series: [
      {
        data: [1, 2, 3]
      }
    ]
  };

  componentDidMount() {
    let _this = this;

    _this.interval = setInterval(function() {
      console.log(_this.state.series[0].data);
      _this.state.series[0].data = _this.props.list;
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <HighchartsReact highcharts={Highcharts} options={this.state} />
      </div>
    );
  }
}

export default HighGraph;

我传递道具的方式：

    <div>
      <HighGraph list={this.state.graphdata} />
    </div>

传递的数组：

[0.003, 0.006, 0, 0, 0.003, 0.006, 0.006, 0, 0.003, 0.006, 0.003, 0.003, 0.006, 0.006, 0.006, 0.006, 0.006, 0.006, 0.003, 0, 0.003, 0.003, 0.006, 0.003, 0.003, 0.003, 0.006, 0.003, 0.01, 0.006, 0, 0.003, 0.003, 0.003, 0.003, 0.003, 0.006, 0.003, 0, 0.006, 0.006]

有任何想法吗？即使控制台告诉我状态已更改，我仍然在图表中看到1,2,3

最佳答案

如果您不调用this.setState()方法，React将不会触发使用新数据的重新渲染。

尝试更改componentDidMount中的行。

它看起来像这样：

componentDidMount() {
  let _this = this;

  _this.interval = setInterval(function() {
    console.log(_this.state.series[0].data);
    _this.setState({ series: [{ data: _this.props.list }] });
  }, 2000);
}