HighCharts не обновляется при изменении состояния в React

Question

Я работаю над быстрой программой, которая берет данные из реакции фермента и строит график на графике. Я сталкиваюсь с этой проблемой, где мой компонент Highcharts не будет обновляться, если я передам данные ему в реквизит. Я вижу, что данные в состоянии изменяются в консоли, но я ничего не вижу на графике.

Компонент графика:

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 на графике, несмотря на то, что консоль сообщает мне, что состояние изменилось

Answer 1

В вашем компоненте HighchartsReact вам нужно предоставить реквизит с именем oneToOne и установить его на true.

<HighchartsReact highcharts={Highcharts} options={this.state} oneToOne={true} />

Это говорит компоненту о необходимости повторного рендеринга, когда появляются новые данные.данных штата или реквизита.

ref: https://api.highcharts.com/class-reference/Highcharts.Chart#update

Answer 2

Если вы не вызовете метод 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);
}