reactjs - useState Hook 的意外行为

Question

我在试用一个图像映射器库时发现了一个意想不到的行为。处理函数 handleInc 的行为不同，具体取决于它是由 + 按钮触发还是通过单击图像中的突出显示区域触发(需要移动鼠标以突出显示区域出现)。

当使用 + 按钮时，行为符合预期，但是当单击图像中的突出显示区域时，状态变量 count 似乎没有超出 1 。

同一函数 handleInc 行为不同的原因是什么。

这是代码(下面的代码为 sandbox)

import { useState } from "react";
import "./styles.css";
// https://github.com/img-mapper/react-img-mapper
import ImageMapper from "react-img-mapper";

const URL =
  "https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg";

export default function App() {
  const [count, setCount] = useState(0);
  const handleInc = () => {
    // this print expected value when + button is clicked
    // but print 0 if highlighted area is clicked
    console.log(count);
    setCount(count + 1);
  };
  const handleDec = () => {
    console.log(count);
    setCount(count - 1);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={handleInc}>+</button>
      {count}
      <button onClick={handleDec}>-</button>

      <ImageMapper
        src={URL}
        map={{
          name: "asdf",
          areas: [
            {
              id: 0,
              active: true,
              title: "BB(1-4)",
              shape: "poly",
              name: "BB(1-4)",
              fillColor: "#eab54d4d",
              strokeColor: "black",
              coords: [
                260,
                142,
                77,
                196,
                184,
                530,
                840,
                529,
                928,
                283,
                894,
                26,
                389,
                53,
                343,
                31,
                321,
                90
              ]
            }
          ]
        }}
        stayMultiHighlighted
        onClick={handleInc}
      />
    </div>
  );
}

Answer 1

似乎 ImageMapper 组件正在内存回调，换句话说，它已经关闭了初始 count 状态值，并且从那时起永远不会更新。

如果您使用功能状态更新，那么单击突出显示的区域似乎会像我认为的那样工作。功能状态更新的工作方式是从先前的状态与回调排队的渲染周期中的状态进行更新。

const handleInc = () => {
  setCount(count => count + 1);
};

const handleDec = () => {
  setCount(count => count - 1);
};

演示