Question

我正在使用Hooks的应用程序中使用Highcharts React包装器，当图表加载或缩放时，将分别触发setExtremes和setAfterExtremes。我一直在寻找类似的问题，但它们与不同的问题有关。

我已将代码简化为最小设置，页面不刷新，数据仅解析一次并添加到图表一次，动画被禁用，并且仍连续两次触发两个事件： *初始人口 *放大

版本：反应16.9，高图表7.2，高图表反应官方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

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

它在库文档中提到。 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 2

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

如果仅触发一次，则问题在于您的useEffect正在检查一个不断变化的值

如果仍然多次触发，则说明有什么触发您的useEffect

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事件

3 个答案: