React Highcharts 多次触发 setExtremes 事件

Question

我在使用 Hooks 的应用程序中使用 Highcharts React 包装器，当我的图表加载或缩放时，它会多次触发 setExtremes 和 setAfterExtremes。我已经浏览过类似的问题，但它们与不同的问题有关。

我已将代码减少到最少的设置，页面不刷新，数据只被解析一次并添加到图表一次，动画被禁用并且它仍然持续触发两个事件 7 次： * 初始种群 * 缩放

版本：react 16.9，highcharts 7.2，highcharts-react-official 2.2.2

图表

<HighchartsReact
  ref={chart1}
  allowChartUpdate
  highcharts={Highcharts}
  options={OPTIONS1}
/>

图表选项：

const [series1, setSeries1] = useState([]);

const OPTIONS1 = {
    chart: {
      type: 'spline',
      zoomType: 'x',
      animation: false
    },
    title: {
      text: ''
    },
    xAxis: {
      events: {
        setExtremes: () => {
          console.log('EVENT setExtremes');
        },
        afterSetExtremes: () => {
          console.log('EVENT sfterSetExtremes');
        }
      },
    },
    plotOptions: {
      series: {
        animation: false
      }
    },
    series: series1
  };

数据人口：

useEffect(() => {
    if (data1) {
      const a = [];

      _.each(data1.labels, (sLabel) => {
        a.push({
          name: sLabel,
          data: [],
        })
      });

      ... POPULATES DATA ARRAYS...

      setSeries1(a);
    }
  }, [data1]);

Answer 1

你的 useEffect 被多次触发可能是因为你正在检查 data1 而 data1 正在改变。您是否尝试过在 useEffect 中放置一个空数组并查看它是否多次触发？

如果它只触发一次，那么问题是你的 useEffect 正在检查一个不断变化的值

如果它仍然触发多次，那么有一些东西触发了你的 useEffect

Answer 2

问题比较老了我也遇到过同样的情况。解决方案是将图表选项移动到状态变量。那么这个事件就不会触发多次了。

图书馆文档中提到了它。 https://github.com/highcharts/highcharts-react -- 见“最佳更新方式”

import { render } from 'react-dom';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

const LineChart = () => {
 
  const [hoverData, setHoverData] = useState(null);
 
  // options in the state
  const [chartOptions, setChartOptions] = useState({
    xAxis: {
      categories: ['A', 'B', 'C'],
      events: {
        afterSetExtremes: afterSetExtremes,
      },
    },
    series: [
      { data: [1, 2, 3] }
    ],
  });

  function afterSetExtremes(e: Highcharts.AxisSetExtremesEventObject) {
    handleDateRangeChange(e);
  }

  return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
        />
      </div>
    )
}

render(<LineChart />, document.getElementById('root'));```

Answer 3

在 useEffect() 中设置状态后，我遇到了同样的问题。我的问题是我对整个选项进行了 (lodash) 深度复制。这也每次都会创建一个新事件。

  // Create options with afterSetExtremes() event
 const optionsStart: Highcharts.Options = {
         ...
        xAxis: {
            events: {
                afterSetExtremes:  afterSetExtremesFunc,
            }
        },
   ....

  // Save in state
  const [chartOptions, setChartOptions] = useState(optionsStart);

  // On Prop Change I update Series
  // This update deepcopy whole Options. This adds one Event Every time
      React.useEffect(() => {
          
        var optionsDeepCopy = _.cloneDeep(chartOptions);
                optionsDeepCopy.series?.push({
                    // ... Add series data
                });


                setChartOptions(optionsDeepCopy);

      }, [xxx]);

解决方法是只更新系列。不是整个选项。

      React.useEffect(() => {
          
        var optionsDeepCopy = _.cloneDeep(chartOptions);
                optionsDeepCopy.series?.push({
                    // ... Add series data
                });


                const optionsSeries: Highcharts.Options = { series: []};
                optionsSeries.series = optionsDeepCopy.series;

                setChartOptions(optionsSeries);

      }, [xxx]);

React Highcharts 多次触发 setExtremes 事件

React Highcharts firing setExtremes event multiple times

reactjs

react-hooks

react-highcharts