如何在 Highcharts 事件侦听器中访问 React 钩子状态

Question

我正在尝试通过添加到现有状态来使用 React 钩子更新事件侦听器中的状态：

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

const LineChart = () => {
  const [hoverData, setHoverData] = useState(null);
  const [hoveredOverCategories, setHoveredOverCategories] = useState([]);
  const [chartOptions, setChartOptions] = useState({
    xAxis: {
      categories: ['A', 'B', 'C'],
    },
    series: [
      { data: [1, 2, 3] }
    ],
    plotOptions: {
      series: {
        point: {
          events: {
            mouseOver(e){
              console.log(hoveredOverCategories); // Always prints the empty array `[]`
              setHoverData(e.target.category);
              setHoveredOverCategories(
                [...hoveredOverCategories, e.target.category]
              );
            }
          }
        }
      }
    }
  });

  return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
        />
        <h3>Hovering over {hoverData}</h3>
        <ol>
          {hoveredOverCategories.map(category => (
            <li>Hovered over {category}</li>
          ))}
        </ol>
      </div>
    )
}

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

但是，事件侦听器（ mouseOver ）似乎无权访问更新状态（ hoveredOverCategories ）： console.log(hoveredOverCategories); 总是打印空数组[] 。

预期的结果是为每个mouseOver事件添加类别数组。 请参阅此演示。 但实际发生的情况是数组仅被最近的值覆盖。

（此复制基于记录在案的最佳更新方式，在此处演示。）

请注意，我能够使用类组件获得预期的结果。

Answer 1

我认为通过闭包访问hoveredCategories并不是更精确的方法。 我能够通过使用先前的状态而不是依赖闭包值来访问它来使其工作：

mouseOver(e){
  console.log(hoveredOverCategories);
  setHoverData(e.target.category);
  setHoveredOverCategories((prevHoveredOverCategories) => {
    return [...prevHoveredOverCategories, e.target.category]
  });
}

看看它的工作原理： https : //stackblitz.com/edit/highcharts-react-hook-state-event-listener-xxqscw