问：

现在，正如我之前讨论过的散点图问题（HighCharts Scatter Plot with ReactJS 中的不一致数据点）是我们不能像 HighCharts 中的其他类型那样直接使用 setState 方法更新数据......

因此，我只需要使用 ref 更新数据（在散点图中）。

我的方案：

我从父组件中获取最小值和最大值，并在负责显示绘图的子组件的 XAxis 中传递相同的最小值和最大值。

问题：

=> 首次挂载组件时 - 初始化 chartOptions，其中系列数据为空（因为 maindata 为空）。现在，useEffect 运行并调用一个 API 来获取数据，我正在使用 ref 方法将该数据传递到 highcharts 中，如下所示......

useEffect(() => {
    const chart = chartRef.current.chart;
    if (chart) {
       chart.series[0].setData(mainData, true, true, false);
    }
}, [data]);

现在，当用户单击刷新图标 - 我将再次获取数据时，我可以使用上述方法更新系列数据。但是，为了在 XAxis 中设置最小值和最大值，我必须这样做（我需要再次设置它，因为我想将范围选择器放置在相同的范围内）：

useEffect(() => {
   setChartOptions((prevState) => ({
        ...prevState,
        xAxis: [
          {
            ...prevState.xAxis[0],
            min: xMax.maxX - 50,
            max: xMax.maxX,
          },
        ],
}));
}, [data]);

重现问题的步骤：

=> 第一次绘图没有出现，因为数据是空的，而不是数据来自 API，这将使用 ref 进行设置，所以现在数据不是空的，我们可以看到绘图。

然后，setChartOptions 将运行，它只会更改 min 和 max，并保持其他内容与以前相同，因此数据将再次为 null，因为它默认为 null（mainData 第一次为 null）。

所以，情节消失了，只能看到空白的白屏。

期望：

=>我认为，我们可以像这样解决这个问题：

无论如何，我们可以设置一个机制来首先运行 setChartOptions，因此 min 和 max 被设置并且 than 和 than only，我们将使用 ref （chart.series[0].setData（mainData， true， true， false）; ):

到目前为止，我尝试过：

=> 简单来说，我们可以直接通过set方法设置系列数据，如下所示：

setChartOptions((prevState) => ({
  ...prevState,
  series: [
    {
      ...prevState.series[0],
      data: mainData, // Update with the fetched data
    },
  ],
  xAxis: [
    {
      ...prevState.xAxis[0],
      min: xMax.maxX - 50,
      max: xMax.maxX,
    },
  ],
}));

但是，这不是散点图（Highcharts BUG)

但是，我无法弄清楚如何使用 ReactJS 解决这个问题。

实际上，我无法创建演示代码，因为数据来自 API，但您可以将此代码作为参考，其中我使用 ref 更新数据：

https://stackblitz.com/edit/react-9wsnd9?file=index.js

======================================================

更新：

嘿，感谢您的快速回复，但我仍然无法解决我的问题：

代码如下：https://stackblitz.com/edit/react-sgkrzf?file=index.js

解释：从父组件 - 我将 min={20} 和 max={40} 传递给子组件。

预期行为：默认情况下，Min 和 Max 应该应用（两者一起），但两者都不能一起工作（如果 min 应用比 max ain't 和如果 max 比 min 忽略）

我想最初分别应用最小值和最大值 20 和 40，然后用户可以更改范围选择器并在刷新时保留更改的值。

即=>刷新数据后，将范围选择器（20,40）更改为（34,75）应保留为（34,75）（我的意思是说调用API）

如何做到这一点？请修改上面的代码并帮助我完成相同的操作。

提前致谢。