尽管在 React Highcharts 单击事件中进行了更新，但仍显示旧状态答案

【问题标题】：Old state is being shown despite updating in React Highcharts click event尽管在 React Highcharts 单击事件中进行了更新，但仍显示旧状态
【发布时间】：2021-07-09 11:54:15
【问题描述】：

我希望显示新状态，但我得到了不同的行为。我有三个点（查看下面的代码或草图），如果我单击一个点，那么无论当时的状态值是什么，将来单击都会显示旧值。我不确定这是由什么引起的。

例如：单击点 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"));

【问题讨论】：

我可能错过了，但someState 和hoverData 之间是否存在双向连接？
@DarshnaRekha 不，这只是举例。 someState 只是一个计数器变量。 hoverData 显示您最后单击的点。我需要以某种方式创建连接吗？我不确定你的意思。

标签： javascript reactjs highcharts

【解决方案1】：

显然，这不是 HighchartJS 中的问题，尤其是 React 钩子。我通过使用 refs 解决了这个问题。

参考这里：How To Solve The React Hook Closure Issue?

【讨论】：