Next.js中React Header组件状态变更后内容未实时刷新如何解决

问题根因 #

• 你直接在组件根作用域调用异步函数userProfile()，组件每次渲染都会重复触发调用，且异步函数执行完成触发state更新时，可能因为没有正确的依赖触发重渲染逻辑，导致视图未更新
• 若你的项目是SSR架构（比如Next.js、Nuxt.js这类服务端渲染框架），服务端执行组件代码时不存在localStorage、URL查询参数query.code等客户端侧API，首次渲染时拿不到用户数据，客户端注水完成后也没有主动触发二次拉取逻辑
• 没有把拉取逻辑放在正确的副作用钩子中，且没有设置对应依赖项触发逻辑执行

修复方案 #

1. 调整拉取逻辑到useEffect钩子，补充正确依赖 #

首先要区分客户端执行环境，避免SSR侧报错，同时把code、userId作为依赖项，只有依赖变化时才触发拉取：

import { useEffect, useState } from 'react'

export default function Header(props) {
  const [userId, setUserId] = useState(null)
  // 其他相关state定义：userName、userAvatarUrl等...

  const userProfile = async() => { 
    // 先判断是客户端环境，避免SSR执行报错
    if (typeof window === 'undefined') return

    const query = new URLSearchParams(window.location.search)
    const code = query.get('code')
    const token = window.localStorage.getItem('mb_js_client:oauth_access_token')

    if (code && !userId) { 
      await handleAuthuser();
      const { profile, balance, userStatus } = await getUserData();
      setMoneyButtonData(profile, balance, userStatus);
    } else if (token && !userId) {
      const { profile, balance, userStatus } = await getUserData();
      setMoneyButtonData(profile, balance, userStatus);
    } 
  }

  function setMoneyButtonData(_profile, _balance, _userStatus) {
    setUserId(_profile.id);
    // 其他state赋值：setUserName、setUserAvatarUrl等...
  }

  // 把拉取逻辑放在useEffect中，补充依赖
  useEffect(() => {
    userProfile()
  }, [query?.code, userId]) // 如果是框架提供的query对象直接用，否则用上面自己取的code作为依赖

  // 渲染逻辑保持不变
  return (
    <a>
      {!userId ? <LoginDialog /> :
      <Profile name={userName} userId={userId} primaryPaymail={userPrimaryPaymail} userEmail={userEmail} userAvatar={userAvatarUrl} userAmount={userAmount} userCurrency={userCurrency} userStatus={userStatus}/> }
    </a>
  )
}

2. 若使用SSR框架可配合客户端渲染标记 #

如果是Next.js这类框架，你可以给Header组件加上'use client'标记（Next.js 13+ App Router），或者使用dynamic导入关闭SSR：

// 页面中导入Header时使用
import dynamic from 'next/dynamic'
const Header = dynamic(() => import('../components/Header'), { ssr: false })

这样就可以保证组件只在客户端侧执行，不会出现服务端和客户端渲染内容不一致的hydration错误。

3. 兜底loading状态 #

可以增加一个加载状态避免切换时的闪烁：

const [loading, setLoading] = useState(true)

// 在userProfile函数结束时设置loading为false
const userProfile = async() => {
  setLoading(true)
  try {
    // 原有逻辑
  } finally {
    setLoading(false)
  }
}

// 渲染时增加loading判断
return (
  <a>
    {loading ? '加载中...' : (!userId ? <LoginDialog /> : <Profile {...props} />)}
  </a>
)

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