React Vite中useState无法设置状态的问题求助

核心问题分析与修复点： #

• 异步更新导致console.log无法实时获取最新值
  React的useState更新是异步批量处理的，调用setAcc(res.data)后，account不会立刻更新。你在setAcc之后直接console.log(account)，打印的始终是更新前的旧状态。要查看最新状态，可通过useEffect监听account的变化：

  useEffect(() => {
    console.log("account最新值:", account);
  }, [account]);
  

• setLogged调用未传入有效参数
  你调用setLogged()时没有传递新状态值，导致logged状态始终保持初始的false。登录成功后需传入true：

  setLogg(true);
  

• 跳转时机错误
  状态更新是异步的，直接在setState后调用redirect会导致状态未完成更新就跳转，目标页面无法获取最新状态。应在状态更新完成后再执行跳转，可通过监听状态的useEffect实现：

  useEffect(() => {
    if (logged && Object.keys(account).length > 0) {
      redirect("/index/");
    }
  }, [logged, account]);
  

• localStorage判断逻辑优化
  原代码中if (jwt != "" && username != "")的判断不严谨——当localStorage无对应项时返回的是null而非空字符串，可简化为：

  if (jwt && username) {
    // 执行请求逻辑
  }
  

修正后的完整代码： #

const [account, setAcc] = useState({});
const [logged, setLogg] = useState(false);

useEffect(() => {
  console.log("app");
  let jwt = localStorage.getItem("jwt");
  let username = localStorage.getItem("username");
  console.log(username + jwt);
  const API_URL = "https://localhost:7129/api/Users/ByUsername?username=";
  
  if (jwt && username) {
    axios
      .get(API_URL + username, {
        headers: authHeader(),
      })
      .then((res) => {
        console.log("passed");
        console.log(res.data);
        setAcc(res.data);
        setLogg(true);
      })
      .catch((res) => {
        if (res.status == 401) {
          setLogout();
          localStorage.removeItem("jwt");
          localStorage.removeItem("username");
          redirect("/login/");
        }
      });
  }
}, []);

// 监听状态变化，完成后跳转
useEffect(() => {
  if (logged && Object.keys(account).length > 0) {
    redirect("/index/");
  }
}, [logged, account]);

function setAccount(param) {
  console.log(param);
  setAcc(param);
} 

内容的提问来源于stack exchange，提问作者Ondřej Halata