React基于localStorage变化渲染组件useEffect不生效问题

你的代码不生效有两个核心问题：

• 原生storage事件仅在非当前页面修改localStorage时触发（比如用户开了两个标签页，在A标签页登出，B标签页会收到事件），同个标签页内调用localStorage.setItem/removeItem不会触发该事件，所以你在当前页点登录/登出时，绑定的checkUserData根本不会执行。
• 状态逻辑有遗漏：初始状态硬编码为true，没有读取localStorage的真实值；登出操作移除user字段后，没有主动把isLoggedIn设为false，就算事件触发也无法同步登出状态。

直接在登录、登出操作执行时同步更新React状态即可，保留storage事件监听兼容跨标签页状态同步，修改后的App组件代码如下：

function App() {
  // 首屏初始化时直接读取localStorage的真实登录状态，避免首屏闪烁
  const [isLoggedIn, setIsLoggedIn] = useState(() => {
    return !!localStorage.getItem("user");
  });

  useEffect(() => {
    const checkUserData = () => {
      const user = localStorage.getItem("user");
      setIsLoggedIn(!!user);
    };
    // 保留跨标签页登录状态同步能力
    window.addEventListener("storage", checkUserData);

    return () => {
      window.removeEventListener("storage", checkUserData);
    };
  }, []);

  return (
    <Router>
      <div className="container">
        <TopBar
          logout={() => {
            localStorage.removeItem("user");
            // 登出操作后主动同步状态
            setIsLoggedIn(false);
          }}
          loginStatus={isLoggedIn}
        />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route
            path="/sign-in/"
            element={
              <SignIn
                toggleLoggedIn={(user) => {
                  localStorage.setItem("user", user);
                  // 登录成功后主动同步状态
                  setIsLoggedIn(true);
                }}
              />
            }
          />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

TopBar组件无需修改，保持原有代码即可正常运行。

拓展优化：如果后续项目里需要在多个层级较深的组件中读取、修改登录状态，可以把登录状态和操作方法封装到全局Context中管理，减少重复的状态同步逻辑，也能避免手动操作localStorage带来的状态不一致问题。

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