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

Question

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

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

Answer 1

显然，这不是 HighchartJS 中的问题，尤其是 React hooks。我使用 refs.

解决了这个问题

参考这里：

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

Old state is being shown despite updating in React Highcharts click event

javascript

highcharts

reactjs