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

问题描述 投票:0回答:1

我试图通过添加到现有状态来使用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事件添加了类别数组。参见this demonstration。但是实际发生的是仅使用最新值覆盖了数组。

((此复制品基于the documented optimal way to update,已展示here。]

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

javascript reactjs highcharts
1个回答
0
投票

在我看来,您可能必须使用具有useEffect作为依赖项的hoveredOverCategories钩子。

const [chartOptions, setChartOptions] = useState({});
useEffect(() => {
  setChartOptions({
    ...
  })
}. [hoveredOverCategories])

发生的情况是,当类别为空数组时,将在第一个渲染上创建图表选项(由于关闭,该数组将使用第一个值存储)。而且它永远不会更新,因为它已保存到状态中。

因此,您可以计算一个钩子上的chartOptions并在hoveredOverCategories更新时对其进行更新,或者根本就不能以组件状态存储chartOptions

© www.soinside.com 2019 - 2024. All rights reserved.