我试图通过添加到现有状态来使用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。]
请注意,我能够使用类组件获得预期的结果。
在我看来,您可能必须使用具有useEffect
作为依赖项的hoveredOverCategories
钩子。
const [chartOptions, setChartOptions] = useState({});
useEffect(() => {
setChartOptions({
...
})
}. [hoveredOverCategories])
发生的情况是,当类别为空数组时,将在第一个渲染上创建图表选项(由于关闭,该数组将使用第一个值存储)。而且它永远不会更新,因为它已保存到状态中。
因此,您可以计算一个钩子上的chartOptions
并在hoveredOverCategories
更新时对其进行更新,或者根本就不能以组件状态存储chartOptions
。