React组件useEffect钩子不更新：登录登出时SideNavbar无法自动渲染

你的代码里，useEffect的依赖是localStorage.getItem('token')，但localStorage是浏览器原生存储API，不属于React的状态管理体系。当用户登录/登出修改localStorage时，React无法检测到这个变化，所以useEffect不会重新执行，isLoggedIn状态也就不会更新，导致SideNavbar只能在页面刷新时才会变化。

下面提供两种可行的解决方式，优先推荐第一种（结合你已有的UserState）：

方案一：利用UserState统一管理登录状态（推荐） #

你已经引入了UserState，说明项目里有用户状态的Context管理。直接从Context中获取登录状态，而不是在App组件自己维护isLoggedIn，这样状态变化时React会自动触发重新渲染。

修改步骤： #

1. 确保UserState的Context中包含isLoggedIn状态（或可通过token存在性判断的状态），以及登录/登出时更新状态的方法。
2. 在App组件中从UserState中获取登录状态：

import Navbar from "./Components/Navbar";
import React, { useContext } from "react";
import { Route,Routes } from "react-router";
// 导入UserContext（根据你的UserState实际导出调整）
import { UserContext } from "./context/user/UserState";
// 其他组件导入...

function App() {
  // 从UserContext中获取登录状态
  const { isLoggedIn } = useContext(UserContext);
  
  return (
    <div className="App">
      <UserState>
        <NoticeState>
          <Navbar/>
          {isLoggedIn && <SideNavbar/>}
          <div className="containerApp">
            {/* 路由部分保持不变 */}
            <Routes>
              <Route element={<NewAccount/>} exact path='/newaccount' />
              <Route element={<Profile/>} exact path='/profile' />
              <Route element={<Notice/>} exact path="/notice"/>
              <Route element={<Result/>} exact path="/result"/>
              <Route element={<TeacherList/>} exact path="/teacherList" />
              <Route element={<Classroom/>} exact path="/classroom" />
              <Route element={<StudentList/>} path="/classroom/:classID"/>
              <Route element={<Home/>} exact path='/' />
              <Route element={<Contact/>} exact path='/contact' />
              <Route element={<Enroll/>}  exact path='/enroll' />
              <Route element={<Login/>}  exact path='/login' />
            </Routes>
          </div>
        </NoticeState>
      </UserState>
    </div>
  );
}

export default App;

3. 在登录组件（Login）中，登录成功后不仅设置localStorage.setItem('token', token)，还要调用UserState中的方法更新isLoggedIn为true；在登出操作时，清除localStorage的token后，调用方法更新isLoggedIn为false。

这样只要登录/登出操作触发了Context中状态的更新，App组件就会自动重新渲染，SideNavbar会实时显示/隐藏。

方案二：手动同步状态+监听storage事件（适合临时修改） #

如果暂时不想改动UserState，可以通过以下方式让isLoggedIn状态和localStorage同步：

修改App组件代码： #

import Navbar from "./Components/Navbar";
import React, { useEffect, useState } from "react";
import { Route,Routes } from "react-router";
// 其他组件导入...

function App() {
  
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(()=>{
    // 初始化检查登录状态
    checkLoginStatus();
    // 监听storage事件，处理其他标签页的登录/登出操作
    window.addEventListener('storage', handleStorageChange);
    // 组件卸载时移除监听
    return () => window.removeEventListener('storage', handleStorageChange);
  },[])

  // 检查登录状态的通用函数
  const checkLoginStatus = () => {
    setIsLoggedIn(!!localStorage.getItem('token'));
  }

  // 处理storage变化的回调
  const handleStorageChange = (e) => {
    if(e.key === 'token') checkLoginStatus();
  }

  // 提供给子组件调用的状态更新方法
  const updateLoginStatus = () => checkLoginStatus();
  
  return (
    <div className="App">
      <UserState>
        <NoticeState>
          {/* 传递更新方法给Navbar，用于登出操作 */}
          <Navbar updateLoginStatus={updateLoginStatus}/>
          {isLoggedIn && <SideNavbar/>}
          <div className="containerApp">
            <Routes>
              {/* 传递更新方法给Login，登录成功后调用 */}
              <Route element={<Login updateLoginStatus={updateLoginStatus}/>}  exact path='/login' />
              {/* 其他路由保持不变 */}
              <Route element={<NewAccount/>} exact path='/newaccount' />
              <Route element={<Profile/>} exact path='/profile' />
              <Route element={<Notice/>} exact path="/notice"/>
              <Route element={<Result/>} exact path="/result"/>
              <Route element={<TeacherList/>} exact path="/teacherList" />
              <Route element={<Classroom/>} exact path="/classroom" />
              <Route element={<StudentList/>} path="/classroom/:classID"/>
              <Route element={<Home/>} exact path='/' />
              <Route element={<Contact/>} exact path='/contact' />
              <Route element={<Enroll/>}  exact path='/enroll' />
            </Routes>
          </div>
        </NoticeState>
      </UserState>
    </div>
  );
}

export default App;

修改Login组件（登录成功逻辑）： #

// 登录成功后的处理
const handleLoginSuccess = (token) => {
  localStorage.setItem('token', token);
  // 调用父组件传递的方法更新状态
  props.updateLoginStatus();
  // 跳转到目标页面，比如首页
}

修改Navbar组件（登出逻辑）： #

const handleLogout = () => {
  localStorage.removeItem('token');
  // 调用父组件传递的方法更新状态
  props.updateLoginStatus();
  // 跳转到登录页或首页
}

这样，登录/登出时会手动触发isLoggedIn状态更新，同时监听storage事件可以处理其他标签页操作导致的token变化，保证状态同步。

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