尽管在 React Highcharts 单击事件中更新,但仍显示旧状态
Old state is being shown despite updating in React Highcharts click event
我想要显示新状态,但我得到了不同的行为。我有三个点(查看下面的代码或草图),如果我单击一个点,那么无论当时状态值是什么,将来单击都会显示旧值。我不确定这是什么原因造成的。
例如:
点击A点,打印0。
递增状态,然后点A,还是打印0。
点击B点,打印1。
点击A点,依然打印0。
素描:https://stackblitz.com/edit/react-bwskb9?file=index.js
import React, { useState, useEffect } 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 [someState, setSomeState] = useState(0);
const [chartOptions, setChartOptions] = useState({
xAxis: {
categories: ["A", "B", "C"]
},
series: [{ data: [1, 2, 3] }],
plotOptions: {
series: {
point: {
events: {
click(e) {
console.log(someState);
setHoverData(e.point.category);
}
}
}
}
}
});
const updateSeries = () => {
setChartOptions({
plotOptions: {
series: {
point: {
events: {
click(e) {
console.log(someState);
setHoverData(e.point.category);
}
}
}
}
}
});
};
useEffect(() => {
updateSeries();
}, [someState]);
return (
<div>
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
<h3>Clicked over {hoverData}</h3>
<button onClick={() => setSomeState(val => val + 1)}>Incr</button>
<p>{someState}</p>
</div>
);
};
render(<LineChart />, document.getElementById("root"));
显然,这不是 HighchartJS 中的问题,尤其是 React hooks。我使用 refs.
解决了这个问题
参考这里:
我想要显示新状态,但我得到了不同的行为。我有三个点(查看下面的代码或草图),如果我单击一个点,那么无论当时状态值是什么,将来单击都会显示旧值。我不确定这是什么原因造成的。
例如: 点击A点,打印0。 递增状态,然后点A,还是打印0。 点击B点,打印1。 点击A点,依然打印0。
素描:https://stackblitz.com/edit/react-bwskb9?file=index.js
import React, { useState, useEffect } 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 [someState, setSomeState] = useState(0);
const [chartOptions, setChartOptions] = useState({
xAxis: {
categories: ["A", "B", "C"]
},
series: [{ data: [1, 2, 3] }],
plotOptions: {
series: {
point: {
events: {
click(e) {
console.log(someState);
setHoverData(e.point.category);
}
}
}
}
}
});
const updateSeries = () => {
setChartOptions({
plotOptions: {
series: {
point: {
events: {
click(e) {
console.log(someState);
setHoverData(e.point.category);
}
}
}
}
}
});
};
useEffect(() => {
updateSeries();
}, [someState]);
return (
<div>
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
<h3>Clicked over {hoverData}</h3>
<button onClick={() => setSomeState(val => val + 1)}>Incr</button>
<p>{someState}</p>
</div>
);
};
render(<LineChart />, document.getElementById("root"));
显然,这不是 HighchartJS 中的问题,尤其是 React hooks。我使用 refs.
解决了这个问题参考这里: