React useState状态未即时更新，用prevState和useEffect仍无效该如何解决

代码核心问题说明 #

• 函数作用域问题：saveChange 定义在 useEffect 内部属于局部变量，组件模板自然无法访问
• 状态取值时机问题：useState 的异步更新本质是状态更新后会触发组件重新渲染，当前渲染周期内的所有变量值从渲染开始就已经被闭包锁定，哪怕你用函数式更新，也不会修改当前作用域内的 userNewInfos 变量值，你打印的永远是本次渲染开始时拿到的旧值。

解决步骤 #

第一步：调整函数定义位置

把 saveChange 从 useEffect 中挪到组件顶层，保证模板可以访问：

const [userNewInfos, setUserNewInfos] = useState({
  user_firstname: "1",
  user_lastname: "2",
  user_password: "3",
});

// 挪到组件顶层定义
const saveChange = (e) => {
  e.preventDefault()
  setUserNewInfos((prev) => {
    return {
      ...prev,
      user_firstname: "4",
      user_password: "5",
      user_lastname: "6",
    };
  });
};

return (
  <div className="modal">
    <form className="modal__infos" onSubmit={saveChange}>
    .......
    </form>
  </div>
)

第二步：正确获取更新后的状态值

两种常用方案按需选择：

方案1：监听状态变化执行操作

用单独的 useEffect 监听 userNewInfos 依赖，状态更新后触发的副作用里拿到的永远是最新值：

// 单独加这个useEffect监听状态变化
useEffect(() => {
  console.log(userNewInfos);
}, [userNewInfos])

方案2：提前构造更新值直接复用

如果需要在提交函数内立刻使用更新后的值，可以先把要更新的对象提前构造出来，同时传给 setUserNewInfos 和后续逻辑：

const saveChange = (e) => {
  e.preventDefault()
  const updatedInfos = {
    ...userNewInfos,
    user_firstname: "4",
    user_password: "5",
    user_lastname: "6",
  };
  setUserNewInfos(updatedInfos);
  // 直接使用提前构造的新值即可，不需要等待state更新
  console.log(updatedInfos);
};

误区澄清 #

你之前的函数式更新写法本身是正确的，它的作用是保证状态更新时拿到的前值永远是最新的，避免批量更新、连续调用set时的状态覆盖问题，只是它不会改变「当前渲染周期内state变量值不变」的闭包特性，所以不是prevState无效。

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