React中调用set函数后能否立即获取更新后的值？

核心思路 #

useState的更新是异步批量执行的，当前函数闭包捕获的是更新前的状态值，所以直接在setValue后访问原状态变量拿不到新值。但你已经用到了函数式更新（setValue((prev) => prev + 1)），可以直接在这个更新逻辑里计算并保存新值，既用来更新状态，又能立即在当前函数中使用。

针对数字类型的修改代码 #

export default function App() {
  const [value, setValue] = useState(0);
  
  const increaseValueAndAlertUpdatedValue = () => {
    let newValue;
    // 在函数式更新中计算并保存新值
    setValue((prev) => {
      newValue = prev + 1;
      return newValue;
    });
    // 直接使用刚计算出的新值
    alert(`updated value: ${newValue}`);
  };

  return (
    <div className='App'>
      <h1>Hello React TypeScript.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={increaseValueAndAlertUpdatedValue}>
        increaseValueAndAlertUpdatedValue
      </button>
    </div>
  );
}

针对大型对象的场景 #

如果value是大型对象，要遵循不可变更新原则，同时同样可以在函数式更新中捕获新对象并复用：

export default function App() {
  const [user, setUser] = useState({ name: "Alice", age: 25, address: { city: "NY" } });
  
  const updateUserAndAlert = () => {
    let updatedUser;
    setUser((prevUser) => {
      // 根据对象结构选择浅复制或深复制，避免修改原状态
      updatedUser = {
        ...prevUser,
        age: prevUser.age + 1,
        address: { ...prevUser.address }
      };
      return updatedUser;
    });
    // 直接使用更新后的对象
    alert(`Updated user age: ${updatedUser.age}`);
  };

  return (
    <div className='App'>
      <button onClick={updateUserAndAlert}>Update User Age</button>
    </div>
  );
}

为什么之前的方法无效？ #

• setTimeout无效：闭包捕获的是当前函数执行时的旧状态值，即使延迟执行，拿到的还是旧值。
• useEffect/useLayoutEffect不符合需求：它们是在组件重渲染后触发，无法在当前点击函数的同步流程中获取新值。

内容的提问来源于stack exchange，提问作者user21357723