NextJS中useState更新React Context值跨页面不保留问题

跨页Context状态丢失由两个常见错误导致：

• 站内跳转使用原生<a>标签触发整页刷新，React应用整体重载，Context Provider随页面重新挂载，内部状态直接回归初始默认值
• _app.js组件参数接收写法错误，同时在组件渲染顶层直接调用setProfile触发无限重渲染，导致Provider状态反复重置

1. 修正_app.js参数写法 #

NextJS自定义App组件需要解构接收Component和pageProps参数，原写法直接接收pageProps会导致组件渲染逻辑异常，Provider被意外卸载重挂：

// 修正后的_app.js
export default function App({ Component, pageProps }) {
  return (
    <ProfileProvider>
      <Component {...pageProps} />
    </ProfileProvider>
  )
}

2. 所有站内跳转使用NextJS客户端路由 #

禁止用原生<a>标签做应用内跳转，换成NextJS内置的Link组件或者useRouter编程式跳转，避免触发整页刷新：

// 声明式跳转示例
import Link from 'next/link'

// 错误写法：<a href="/other-page">跳转到其他页面</a>
// 正确写法
<Link href="/other-page">跳转到其他页面</Link>

按钮触发的编程式跳转示例：

import { useRouter } from 'next/router'
import { useProfileContext } from './user_profile'

export default function UserAccount() {
  const router = useRouter()
  const { setProfile } = useProfileContext()

  // 状态更新逻辑放在事件回调里，不要写在组件顶层
  const handleJump = () => {
    setProfile("SOME TEXT PROFILE VALUE")
    router.push('/other-page')
  }

  return <button onClick={handleJump}>设置资料并跳转</button>
}

3. 禁止在组件渲染顶层直接调用状态更新方法 #

组件每次渲染都会执行函数根作用域的代码，直接在根作用域调用setProfile会触发「渲染→改状态→重渲染」的死循环，状态根本无法稳定保存。所有setProfile调用必须放在事件回调、useEffect这类副作用执行区域中。

React Context是内存级状态存储，只要Provider不卸载、页面不刷新就能保持状态，如果需要手动刷新页面后也保留数据，可以搭配本地存储做持久化，修改user_profile.js即可：

import { useState, useEffect } from 'react'
import { createContext, useContext } from 'react'

const ProfileContext = createContext()

export function ProfileProvider({ children }) {
  // 初始化时优先读取本地存储的缓存值
  const [profile, setProfile] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('user_profile')
      return saved ? JSON.parse(saved) : "default value"
    }
    return "default value"
  })

  // 每次profile更新时同步写入本地存储
  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('user_profile', JSON.stringify(profile))
    }
  }, [profile])

  return (
    <ProfileContext.Provider value={{ profile, setProfile }}>
      {children}
    </ProfileContext.Provider>
  )
}

export const useProfileContext = () => {
  return useContext(ProfileContext)
}

内容的提问来源于stack exchange，提问作者engineer-x