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

6ju8rftf  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(183)

我 想 实现 惰性 加载 功能 , 如下 所 示 。
jsfiddle.net/uf34oecg/ 的 最 大 值
如果 你 检查 它 的 控制 台 , 它 只 在 第 一 次 加载 图表 时 打印 loadInitialData 一 次 。 然后 它 就 不再 打印 了 , 或者 一旦 你 选择 了 1m ( 在 第 一 次 加载 之后 ) , 它 就 调用 afterSetExtremes 函数 并 打印 afterSetExtremes
我 发现 同样 的 例子 被 转换 成 了 reactjs 代码 。
https://codesandbox.io/s/highcharts-react-demo-forked-wvrd6?file=/demo.jsx:673-688 格式
在 这个 例子 中 , 当 你 第 一 次 加载 时 , 它 调用 了 afterSetExtremes 两 次 , 这 是 错误 的 。 它 不 应该 在 初始 加载 时 调用 afterSetExtremes
我 不 明白 为什么 会 发生 这种 情况 ? 我 花 了 几 个 小时 也 想 不通 。
因此 , 在 实际 工程 中 表现 不 佳 。

bmp9r5qi

bmp9r5qi1#

这是因为有不同的行动顺序。
使用React:
1.创建的图表不包含数据
1.接收数据并更新图表
无React:
1.接收数据
1.图表已创建
作为一种解决方案,您可以在useEffect挂钩中调用loadInitialData,并在接收到数据后呈现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

相关问题