Javascript 当React中的状态更改时，HighCharts不更新

我正在开发一个快速程序，从酶反应中提取数据并绘制成图表。我遇到了这个问题，如果我用道具传递数据，我的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;

---

有什么想法吗？不管控制台告诉我状态已更改，我仍然在图表中看到1,2,3。如果不调用

this.setState（）

方法，React将不会触发使用新数据重新渲染

尝试更改

组件didmount

中的行

它看起来像这样：

componentDidMount() {
  let _this = this;

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

---

在HighchartsReact组件中，您需要提供一个名为

oneToOne

的道具，并将其设置为

true

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

这会告诉组件在通过状态或属性数据显示新数据时重新渲染

---

参考：

设置updateArgs对我有效，记录在

---

我一直在处理一些类似的问题，其中我尝试了许多相同的建议，添加

oneToOne={true}

和

updateArgs={[true，true，true]}

在我的应用程序中，我使用React上下文api和useReducer来存储图表选项。通过将序列部分从序列数组更改为单个序列对象，我成功地重新渲染了图表

你所在州的例子

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

你可以试着换成

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

---

由于某些原因，在尝试更改访问序列数组的状态时，它不会触发重新渲染。也可以更改整个系列的状态，而不是访问

state.series[0]

进行更新。希望这是有意义的。

我会把我自己的经验加进去，希望这能帮助别人。出于某种莫名其妙的原因，我完成这项工作的唯一方法就是使用该系列的索引。
此代码有效，图表更新无需任何上述道具：

currentSeries.forEach((s, i) => {
        if (s.name === e?.target?.name || forceReset) {
          if (forceReset) {
            setIsFilterMode(false);
          }
          currentSeries[i].visible = true;
          return;
        }
        currentSeries[i].visible = !currentSeries[i].visible;

该点是通过索引访问每个系列的

visible

属性。 此代码不起作用，且上述各项均无效：

currentSeries.forEach((s, i) => {
        if (s.name === e?.target?.name || forceReset) {
          if (forceReset) {
            setIsFilterMode(false);
          }
          s.visible = true;
          return;
        }
        s.visible = !s.visible;

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

currentSeries.forEach((s, i) => {
        if (s.name === e?.target?.name || forceReset) {
          if (forceReset) {
            setIsFilterMode(false);
          }
          currentSeries[i].visible = true;
          return;
        }
        currentSeries[i].visible = !currentSeries[i].visible;

currentSeries.forEach((s, i) => {
        if (s.name === e?.target?.name || forceReset) {
          if (forceReset) {
            setIsFilterMode(false);
          }
          s.visible = true;
          return;
        }
        s.visible = !s.visible;