如何使用全局变量修改React Bootstrap Navbar登录项并触发组件刷新？

问题原因 #

React 组件仅会在props、内部state、消费的Context发生变化时触发重渲染，你直接读取全局变量window.isLoggedOut，变量本身的修改不会被React的更新机制感知，所以Navbar不会自动刷新。

解决方案 #

方案1：适配你当前全局变量的用法 #

通过自定义事件通知组件状态变化，修改组件代码如下：

import React, { useState, useEffect } from 'react';
import { Navbar,Nav,NavItem } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import { Link } from 'react-router-dom';
import './customNavBar.css';

const CustomNavBar = () => {
  // 把全局变量同步到组件内部state，驱动渲染
  const [isLoggedOut, setIsLoggedOut] = useState(window.isLoggedOut);

  useEffect(() => {
    // 监听登录状态变化的自定义事件
    const handleAuthUpdate = () => setIsLoggedOut(window.isLoggedOut);
    window.addEventListener('authStateChanged', handleAuthUpdate);
    // 组件卸载时清除监听避免内存泄漏
    return () => window.removeEventListener('authStateChanged', handleAuthUpdate);
  }, []);

  return(
    <div>
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand>
              TEAMWORKER
          </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    <NavItem eventkey={1}><Link className="nav-link" to="/DashBoard">Home</Link></NavItem>
                    <NavItem eventkey={2}><Link className="nav-link" to="/help">Help</Link></NavItem>
                    <NavItem eventkey={3}>
                      {/* 注意退出登录跳转路径建议区分，不要都用/login */}
                      <Link className="nav-link" to={isLoggedOut ? "/logout" : "/login"}>
                        {isLoggedOut ? 'Logout' : 'Login'}
                      </Link>
                    </NavItem>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    </div>
  )
};

之后所有修改window.isLoggedOut的位置，修改完后都要触发自定义事件通知组件更新：

// 示例：用户登录成功后修改全局变量
window.isLoggedOut = false;
window.dispatchEvent(new Event('authStateChanged'));

// 示例：用户退出登录后修改全局变量
window.isLoggedOut = true;
window.dispatchEvent(new Event('authStateChanged'));

方案2：更符合React规范的用法 #

不推荐用全局变量存状态，建议用React Context或者轻量状态管理库（Zustand、Jotai等）存登录状态，所有需要用到登录状态的组件消费这个状态，状态更新时组件会自动重渲染，不需要手动做事件通知。

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