在异步函数超时期间更新变量

Question

const [value, setValue] = useState(0);
const counter = () => {
  setTimeout(() => {
    // setValue(value + 1);
    setValue((prevState) => prevState + 1);
  }, 2000);
};

counter 在按下按钮时调用，即

<button onClick={counter}>counter</button>

为什么如果我多次按下按钮，setValue(value + 1) 会更新一次值，但 setValue((prevState) => prevState + 1) return 相对于按下的数量的正确值？

Answer 1

状态更新并不总是即时的。使用先前的值可确保您在设置值的时间点使用当前值。 Kent Dodds 很好地解释了这一点 in this post。更大的问题可能是，为什么要将其包装在 setTimeout?

中

在异步函数超时期间更新变量

Updating a variable during asynchronous function time out

javascript

reactjs

settimeout