为什么 afterSetExtremes 函数被调用两次 highcharts 使用 react

Question

我想实现这里显示的延迟加载功能。

如果您检查它的控制台，它只会在第一次加载图表时打印一次 loadInitialData。然后它永远不会打印它，或者一旦你 select 1m （第一次加载后），它调用 afterSetExtremes 函数并打印 afterSetExtremes.

我发现相同的示例转换为 reactjs 代码

https://codesandbox.io/s/highcharts-react-demo-forked-wvrd6?file=/demo.jsx:673-688

在此示例中，当您第一次加载时，它会调用 afterSetExtremes 两次，这是错误的。它不应在初始加载时调用 afterSetExtremes。

我不明白为什么会这样？我花了几个小时后无法弄清楚。

因此，它在实际项目中表现不佳。

Answer 1

那是因为有不同的动作顺序。

使用 React：

创建的图表没有数据
收到数据并更新图表

没有反应：

收到数据
图表已创建

作为解决方案，您可以在 useEffect 中调用 loadInitialData hook 并在收到数据后渲染 HighchartsReact 组件。

const ChartComponent = () => {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    loadInitialData();
  }, []);

  function loadInitialData() {
    fetch(dataURL)
      .then((res) => res.ok && res.json())
      .then((data) => {
        ...
        setOptions({
          ...chartOptions,
          series: [
            {
              data
            }
          ],
          ...
        });
      });
  }

  function afterSetExtremes(e) {
    ...
  }

  return (
    options && (
      <HighchartsReact
        constructorType="stockChart"
        highcharts={Highcharts}
        options={options}
      />
    )
  );
};

现场演示： https://codesandbox.io/s/highcharts-react-3tcdw7?file=/demo.jsx

为什么 afterSetExtremes 函数被调用两次 highcharts 使用 react

why is afterSetExtremes function being called twice highcharts using react

highcharts

reactjs

react-highcharts