React useState未即时更新 如何实现状态即时触发更新

你遇到的状态「不即时更新」问题和setUser的对象展开写法无关，两种你试过的setState写法都是正确的——只要传入新的对象引用React就会触发重渲染，问题出在代码本身的逻辑错误，以及对React setState异步特性的误解：

• 误解setState异步机制：setUser是异步批处理操作，调用后当前函数闭包中保存的还是旧的user值，你在调用handleLogUserIn之后立刻打log、resolve Promise，拿到的必然是旧状态，不代表更新没生效，最新值要等组件重渲染后才能在新的渲染周期里拿到。
• Context传值字段不匹配：你初始化state时存的用户名字段是name，但Provider向下传递的是username: user.username，这个字段自始至终都是undefined，下游组件读不到用户名，会误以为状态没更新。
• 校验完成标记传错：你把异步校验函数loginStatus本身当成checkLoginStatusReady值传给了Context，没有把state里的布尔类型标记传下去，下游组件无法感知「token校验完成」的时机，很容易在校验未完成时就读取用户状态，得到未登录的错误结果。
• 存在时序隐患：你用new Promise包裹async函数属于多余写法，容易造成resolve时机不对，比如token无效的分支你根本没设置checkLoginStatusReady: true，会导致下游一直等不到校验完成的标记。

import React, { useState, useEffect } from "react";
import { useReadCookie } from "../hooks/cookies";
import UserContext from "./user-context";

const UserContextProvider = ({ children }) => {
  // 正确执行自定义hook拿到读取方法
  const readCookie = useReadCookie();

  const [user, setUser] = useState({
    name: null,
    userID: null,
    token: null,
    permissions: null,
    loginStatus: false,
    checkLoginStatusReady: false,
  });

  // 组件挂载时自动执行token校验，不需要手动把校验函数传给下游
  useEffect(() => {
    const checkLoginStatus = async () => {
      const token = readCookie("token");
      // token不存在直接标记校验完成
      if (!token || token.length !== 174) {
        setUser(prev => ({
          ...prev,
          checkLoginStatusReady: true
        }));
        return;
      }
      try {
        const req = await fetch("/api/checkLoginStatus.php");
        const res = await req.json();
        if (res.success) {
          setUser({
            name: res.name,
            userID: res.userID,
            token: res.token,
            permissions: res.permissions,
            loginStatus: true,
            checkLoginStatusReady: true,
          });
        } else {
          setUser({
            name: null,
            userID: null,
            token: null,
            permissions: null,
            loginStatus: false,
            checkLoginStatusReady: true,
          });
        }
      } catch (err) {
        // 请求异常也要标记校验完成，避免页面卡死
        setUser(prev => ({
          ...prev,
          checkLoginStatusReady: true
        }));
      }
    };
    checkLoginStatus();
  }, [readCookie]);

  return (
    <UserContext.Provider
      value={{
        // 修正字段名，和state保持一致
        name: user.name,
        userID: user.userID,
        token: user.token,
        permissions: user.permissions,
        loginStatus: user.loginStatus,
        // 传布尔类型的校验完成标记，不是传函数
        checkLoginStatusReady: user.checkLoginStatusReady,
        setUser,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

export default UserContextProvider;

• 不要在调用setUser的同步代码里立刻读取user状态，当前闭包永远拿不到最新值。如果要在状态更新后执行逻辑，用useEffect监听user变化即可，不要依赖setState的同步返回。
• 下游组件使用时，先判断checkLoginStatusReady === true再读取登录状态、用户信息，避免在校验过程中拿到默认的未登录状态。
• 如果要基于之前的状态更新，用函数式写法setUser(prev => ({...prev, xxx: yyy}))即可，和直接传新对象的区别只是要不要依赖旧状态，两种写法都会生成新引用触发重渲染。

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