javascript - 如何在 Highcharts 事件监听器中访问 React 钩子(Hook)状态

Question

我正在尝试通过添加到现有状态来使用 React hook 来更新事件监听器中的状态:

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 事件添加类别数组。请参阅this demonstration 。但实际发生的情况是，数组仅被最新值覆盖。

(此复制基于 the documented optimal way to update ，演示了 here 。)

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

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