使用React的useState钩子时赋值后无法立即获取更新后的值怎么办

React 中 useState 的状态更新是批量异步调度的，调用 setName 之后不会立刻修改当前渲染周期内的 name 变量，而是会将更新请求加入待处理队列，等当前事件循环的所有同步任务执行完毕后，才会触发组件重渲染，更新后的状态值只能在下一次组件渲染的作用域中获取到。

你封装 Promise 的方案没有生效，是因为 setName 本身的异步调度逻辑和你自己写的 Promise 没有关联，调用 setName 后立刻执行 res() 时，状态更新还没有被 React 执行，当前作用域下的 name 还是当前渲染周期的旧值，所以就算加了 await 也拿不到更新后的值。

可以根据你的业务场景选择以下三种方案解决：

• 方案1：用 useEffect 监听状态变化
  如果需要在状态更新完成后执行后续逻辑，将逻辑放到监听对应状态的 useEffect 中即可，状态更新触发重渲染后，useEffect 会自动感知到变化执行对应逻辑：

import React, { useState, useEffect } from "react";

const Dictionary = () => {
  const [name, setName] = useState("Bob");

  // 监听name变化，name更新后自动执行
  useEffect(() => {
    console.log("最新的name值：", name);
  }, [name]);

  useEffect(() => {
    updateName();
  }, []);

  const updateName = () => {
    setName("John");
  };

  return (
    <>
      <h2>Dictionary</h2>
    </>
  );
};

• 方案2：直接复用要设置的新值
  如果后续逻辑只需要用到你即将设置的新值，不需要依赖旧状态计算，可以直接把新值存为变量复用，不需要等待状态更新完成再取：

const updateName = () => {
  const newName = "John";
  setName(newName);
  // 直接使用提前定义的newName做后续操作即可
  console.log("要设置的name值：", newName);
};

• 方案3：函数式更新中复用计算后的新值
  如果新状态需要基于上一轮状态计算得到，可以在函数式更新的回调中先计算得到新值，完成后续逻辑后再返回新值即可：

const updateName = () => {
  setName(prevName => {
    // 基于旧状态计算新状态
    const newName = `${prevName}_后缀`;
    // 直接用计算好的newName做后续操作
    console.log("计算得到的新name值：", newName);
    return newName;
  });
};

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