React.js中useEffect仅执行一次及页面样式不更新问题求助

你的核心问题在于直接操作DOM+useEffect仅执行一次，导致登录状态变化后视图无法更新。React是声明式框架，应该用状态驱动视图，而不是手动修改DOM。

原代码的问题 #

1. 空依赖数组[]让useEffect只在组件挂载时运行一次，后续登录状态变化（比如用户登录后设置了Logged In）不会触发这个effect，所以DOM不会更新。
2. 直接通过document.getElementById修改样式，违背了React的状态管理逻辑，虚拟DOM和真实DOM会出现不一致，后续React渲染可能覆盖你的手动修改。

正确实现方式 #

用React状态维护登录状态，通过条件渲染控制元素显示/隐藏：

import { useState, useEffect } from 'react';

function Navbar() {
  // 初始化登录状态，从localStorage读取
  const [isLoggedIn, setIsLoggedIn] = useState(() => {
    return localStorage.getItem("Logged In") !== null;
  });

  // 监听登录状态变化（比如其他页面/标签页修改了localStorage）
  useEffect(() => {
    const handleStorageUpdate = (e) => {
      if (e.key === "Logged In") {
        setIsLoggedIn(e.newValue !== null);
      }
    };

    window.addEventListener('storage', handleStorageUpdate);
    return () => window.removeEventListener('storage', handleStorageUpdate);
  }, []);

  // 登录操作示例：更新localStorage同时修改状态
  const handleLogin = () => {
    localStorage.setItem("Logged In", "user-token");
    setIsLoggedIn(true);
  };

  // 登出操作示例
  const handleLogout = () => {
    localStorage.removeItem("Logged In");
    setIsLoggedIn(false);
  };

  return (
    <nav>
      {/* 根据状态条件渲染元素 */}
      {isLoggedIn && (
        <>
          <div id="pfp">用户头像</div>
          <button id="NavLoginButtonpfp" onClick={handleLogout}>退出登录</button>
        </>
      )}
      {!isLoggedIn && <button onClick={handleLogin}>登录</button>}
    </nav>
  );
}

关键说明 #

• 状态驱动视图：isLoggedIn状态变化时，React会自动重新渲染组件，根据状态显示/隐藏对应元素，无需手动操作DOM。
• localStorage同步：添加storage事件监听是为了处理跨标签页的登录状态同步，如果你的应用不需要这个功能，可以省略，只在登录/登出函数里更新isLoggedIn状态即可。
• 避免强制刷新：window.location.reload会导致页面重新加载，不仅体验差，还可能因为登录状态判断逻辑导致循环刷新，完全没必要用这种方式。

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