Next.js中useState与useRef引发异常渲染问题求助

背景回顾 #

你在Next.js项目中开发登录功能与导航栏时，遇到了SSR与客户端渲染不一致的问题，先后尝试了两种方案：

• useState+空依赖useEffect：仅组件首次挂载时读取token，登录/注销后导航栏不更新，需刷新页面才生效
• useRef+无依赖useEffect：登录/注销后导航栏能正常更新

疑问1：为何useState更新token后未触发重渲染？ #

你的useEffect使用了空依赖数组[]，这意味着该副作用仅在组件首次挂载时执行一次。登录或注销操作会修改localStorage中的token，但这个useEffect不会重新运行，setToken也就不会被调用——组件的token状态始终是初始的null，自然不会触发重渲染。

只有当页面刷新时，组件重新挂载，useEffect才会再次执行，读取最新token并更新状态，导航栏才会正常显示。

疑问2：useRef变更不触发重渲染，为何导航栏能随之变化？ #

首先明确：useRef的current属性变更确实不会触发组件重渲染，你的认知是对的。

导航栏能更新的核心原因是登录/注销操作触发了其他重渲染事件：比如登录后跳转页面（路由变化带动导航栏组件重渲染），或是登录组件的状态变化触发了父组件重渲染，进而让导航栏组件重新渲染。

而你的useEffect没有添加依赖数组，每次组件渲染时都会执行，所以每次重渲染都会重新读取localStorage中的最新token并赋值给token.current，导航栏的渲染逻辑依赖token.current，因此能显示最新状态。

但这种写法不可靠：如果登录/注销操作未触发任何其他重渲染（比如仅在当前页切换状态不跳转），导航栏就不会更新——因为useRef本身不会触发重渲染。

正确解决方案 #

推荐用React Context管理全局登录状态，既能保证状态同步，又能自动触发重渲染：

1. 创建AuthContext #

// auth-context.js
import { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [token, setToken] = useState(null);

  // 组件挂载时从localStorage读取token
  useEffect(() => {
    const savedToken = localStorage.getItem('token');
    if (savedToken) setToken(savedToken);
  }, []);

  // 登录方法：同步更新状态与localStorage
  const login = (newToken) => {
    setToken(newToken);
    localStorage.setItem('token', newToken);
  };

  // 注销方法：清空状态与localStorage
  const logout = () => {
    setToken(null);
    localStorage.removeItem('token');
  };

  return (
    <AuthContext.Provider value={{ token, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

2. 导航栏组件使用Context #

// Navbar.js
import { useAuth } from './auth-context';

export default function Navbar() {
  const { token, logout } = useAuth();

  return (
    <nav>
      {token ? (
        <button onClick={logout}>注销</button>
      ) : (
        <a href="/login">登录</a>
      )}
    </nav>
  );
}

3. 在_app.js中包裹全局Provider #

// _app.js
import { AuthProvider } from './auth-context';

export default function MyApp({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

这种方案能让登录/注销操作直接同步全局状态，导航栏会自动触发重渲染，同时解决了SSR与客户端渲染不一致的问题（服务端渲染时token为null，客户端挂载后自动读取localStorage更新状态）。

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