React Highcharts firing setExtremes event multiple times

问题

I am using Highcharts React wrapper in an app using Hooks, when my chart is either loaded or zoomed it fires both setExtremes and setAfterExtremes multiple times each. I've looked through for similar questions but they are related to different issues.

I've reduced the code to the minimum setup, the page is not refreshing, the data is only parsed once and added to the chart once yet, animation is disabled and it's still consistently firing both events 7 times on: * initial population * on zoom

Versions: react 16.9, highcharts 7.2, highcharts-react-official 2.2.2

Chart

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

Chart Options:

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
  };

Data Population:

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

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

      ... POPULATES DATA ARRAYS...

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

回答1:

Rather the question is old I also faced the same situation. The solution is to move the chart options to a state variable. Then the event will not fire multiple times.

It is mentioned on the library docs. https://github.com/highcharts/highcharts-react -- see the "optimal way to update"

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'));```

回答2:

Your useEffect is getting fired multiple times probably because you are checking for data1 and data1 is changing. have you tried putting an empty array in your useEffect and see if it is firing multiple times?

if it only fires up once then the problem is that your useEffect is checking for a value that is constantly changing

if it still fires multiple times then there is something that is triggering your useEffect

来源：https://stackoverflow.com/questions/59068493/react-highcharts-firing-setextremes-event-multiple-times

标签

reactjs

react-hooks

react-highcharts