为什么警报在此代码中显示以前的状态

Question

当我递增时，警报给出真正的numRef.current值，但stateNumber的值始终是前一个。

我知道这是由于闭包，但即使我一直在阅读有关作用域和闭包如何工作的信息，我也不明白为什么在这种情况下 stateNumber 的值不是当前的值，因为 setStateNumber 是在 setTimeout 之前调用的，所以该值应该已经更新

import React, { useState, useEffect, useRef } from "react";
const RefComponent = () => {
  const [stateNumber, setStateNumber] = useState(0);
  const numRef = useRef(0);
  function incrementAndDelayLogging() {
    setStateNumber(stateNumber + 1);
    numRef.current++;
    setTimeout(
      () => alert(`state: ${stateNumber} | ref: ${numRef.current}`),
      1000
    );
  }
  return (
    <div>
      <h1>useRef Example</h1>
      <button onClick={incrementAndDelayLogging}>delay logging</button>
      <h4>state: {stateNumber}</h4>
      <h4>ref: {numRef.current}</h4>
    </div>
  );
};
export default RefComponent;

Answer 1

function incrementAndDelayLogging() {
const newStateNumber = stateNumber + 1
setStateNumber(newStateNumber);
numRef.current++;
setTimeout(
  () => alert(`state: ${newStateNumber} | ref: ${numRef.current}`),
  1000
);

}

这可能会:)修复它