如何将React State的最新值作为属性传递给ProtectedRoute组件

我完全懂你现在的困扰——React的异步状态更新特性，在跨组件传值做权限管控这种场景下，确实很容易踩坑。咱们一步步拆解问题，给出可行的解决方案。

问题根源分析 #

首先你在App组件里调用setUserLogged(data)后立刻打印userLogged，看到的还是旧值，这是因为useState的更新是异步批量处理的，状态不会立刻同步更新。而你的ProtectedRoute组件额外套了一层useState和useEffect，反而多了一层状态同步的延迟，没必要的同时还加重了问题。

另外，userLogged的初始值是undefined，这会导致页面加载时ProtectedRoute直接判定未登录并跳转，哪怕用户其实已经是登录状态（比如刷新页面后）。

解决方案步骤 #

1. 简化ProtectedRoute组件，直接使用传入的props #

完全不需要在ProtectedRoute内部维护独立状态，直接用父组件传入的isLoggedIn即可，这样能保证拿到的是最新的状态值：

import { Navigate, Outlet } from "react-router-dom"

const ProtectedRoute = ({ isLoggedIn }) => {
  // 处理初始加载状态：如果isLoggedIn还未确定，返回加载提示避免错误跳转
  if (isLoggedIn === undefined) {
    return <div>加载中...</div>;
  }
  
  return isLoggedIn ? <Outlet /> : <Navigate to="/" />;
};
export default ProtectedRoute;

2. 优化App组件的状态处理与Firebase认证同步 #

为了避免页面刷新后丢失登录状态，你应该在App组件初始化时就检查Firebase的当前用户状态，而不是只依赖Login组件的回调。同时，别在setUserLogged后立刻依赖更新后的状态：

import { useState, useEffect } from "react"
import './App.css'
import Login from "./components/admin/Login"
import Homepage from "./components/homepage/Homepage"
import { BrowserRouter, Routes, Route } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute"
import AdminPage from "./components/admin/AdminPage"
// 引入Firebase auth模块
import { getAuth, onAuthStateChanged } from "firebase/auth";

function App() {
  const [userLogged, setUserLogged] = useState(undefined) // 初始值设为undefined表示加载中

  // 初始化时监听Firebase用户状态，刷新页面也能恢复登录状态
  useEffect(() => {
    const auth = getAuth();
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUserLogged(!!user); // 将用户对象转为布尔值，明确登录状态
    });
    
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  const getUser = (data) => {
    setUserLogged(data)
    // 这里不要立刻打印userLogged，因为状态更新是异步的
    console.log("登录状态已更新为: " + data)
  }

  return (
    <BrowserRouter> {/* 注意：BrowserRouter需要包裹Routes，你之前的代码里漏了这层 */}
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/login" element={<Login sendUser={getUser}/>} />
        <Route element={<ProtectedRoute isLoggedIn={userLogged} />}>
          <Route path="/admin" element={<AdminPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
export default App

3. 确保Login组件正确传递登录状态 #

你的Login组件在Firebase登录成功后，要把明确的登录状态（比如true）通过sendUser回调传递给App组件，示例代码如下：

// Login组件关键代码示例
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const Login = ({ sendUser }) => {
  const handleLogin = async (email, password) => {
    const auth = getAuth();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      // 登录成功后传递true表示已登录
      sendUser(true);
    } catch (error) {
      console.error("登录失败:", error);
      sendUser(false);
    }
  }

  // 其他UI和逻辑代码...
}

为什么这样能解决问题？ #

• 移除了ProtectedRoute内部的冗余状态，直接使用父组件的最新状态，避免了额外的同步延迟
• 增加了初始化时的Firebase状态监听，保证页面刷新后能正确恢复登录状态
• 处理了初始加载状态，避免页面刚加载时就错误跳转

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