为什么useState初始值设为false时set函数不生效？

问题原因 #

• 当auth初始值设为false时，组件首次渲染直接返回<Navigate to="/login" />，触发路由跳转后PrivateRoutes组件会被卸载。后续异步校验JWT完成后调用setAuth(true)，但此时组件已不存在，状态更新无法触发重新渲染，导致始终停留在登录页。
• 初始值设为true或[]时，组件首次渲染会先返回<Outlet />（[]在布尔判断中为true），组件不会被卸载，异步校验完成后的状态更新能正常触发重新渲染，因此功能正常。

修复方案 #

添加加载状态避免提前跳转，同时用useEffect包裹异步校验逻辑，确保组件挂载时仅执行一次：

import { useState, useEffect } from 'react';
import { Outlet, Navigate } from 'react-router-dom';
import * as jose from 'jose';

// 请替换为你的实际公钥和算法
const spki = '你的SPKI公钥';
const alg = 'RS256';

function PrivateRoutes() {
  const [auth, setAuth] = useState(null); // null表示认证未完成
  const [loading, setLoading] = useState(true);

  async function hasJWT(jwt) {
    try {
      const publicKey = await jose.importSPKI(spki, alg);
      await jose.jwtVerify(jwt, publicKey, {
        issuer: 'backup dashboard',
        audience: 'user',
      });
      setAuth(true);
    } catch(e) {
      localStorage.removeItem('token');
      console.error(e.code, e.message);
      setAuth(false);
    } finally {
      setLoading(false); // 无论校验结果如何，结束加载状态
    }
  }

  useEffect(() => {
    const jwt = localStorage.getItem('token');
    if (jwt) {
      hasJWT(jwt);
    } else {
      setAuth(false);
      setLoading(false);
    }
  }, []);

  if (loading) {
    return <div>加载中...</div>; // 可替换为自定义加载组件
  }

  return auth ? <Outlet /> : <Navigate to="/login" />;
}

export default PrivateRoutes;

关键修改点 #

• 新增loading状态，在异步校验完成前阻止路由跳转，保证组件不会被提前卸载。
• 用useEffect包裹认证逻辑，确保仅在组件挂载时执行一次，避免重复调用。
• 将auth初始值设为null，明确区分未完成校验、已认证、未认证三种状态。

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