IT技术 - React Highcharts 多次触发 setExtremes 事件 - 吾爱随笔录

React Highcharts 多次触发 setExtremes 事件

IT技术 reactjs react-hooks react-highcharts

2021-05-07 06:35:19

我在使用 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]);

3个回答

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

它在图书馆文档中提到。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'));```

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

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

如果它仍然多次触发那么就会触发你的 useEffect

在 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]);

其它你可能感兴趣的问题