React+Gatsby项目中Context状态不更新的问题求助

你的问题核心是Context中的user始终停留在默认值，没有随异步请求完成而更新。结合Gatsby的特性和代码细节，以下是具体的排查方向和修复方案：

排查第一步：确认异步流程是否执行 #

先打开浏览器控制台，查看是否打印了useEffect、then、finally这三个日志：

• 如果没有useEffect日志：说明页面组件未在客户端完成hydrate（Gatsby静态生成的页面在构建时不会执行客户端钩子）
• 如果只有useEffect但没有then：说明loadUser的异步请求未正常完成
• 如果日志齐全但状态没更新：检查React状态更新逻辑或Context实例是否重复

修复方案 #

方案一：适配Gatsby静态渲染的初始状态 #

Gatsby静态生成的页面会在构建时提前渲染组件，此时useEffect等客户端钩子不会执行，导致初始状态直接渲染到静态页面中。修改父组件的初始状态，让静态渲染时显示加载状态，客户端hydrate后再更新：

// parent 组件修改后的代码
const Page: React.FC<PageProps> = () => {
  // 将isLoading初始值改为true，匹配Context默认值
  const [user, setUser] = useState<Nullable<User>>(null)
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const [isLoaded, setIsLoaded] = useState<boolean>(false)

  useEffect(() => {
    console.log('useEffect')
    loadUser()
      .then(user => {
        console.log('then')
        setUser(user)
        setIsLoaded(true)
      })
      .catch(error => {
        console.log('catch')
        setUser(null)
        setIsLoaded(false)
      })
      .finally(() => {
        console.log('finally')
        setIsLoading(false)
      })
  }, [])

  return (
    <UserContext.Provider value={{
      user: user,
      isLoading: isLoading,
      isLoaded: isLoaded,
    }}>
      <Navbar />
      <Main />
    </UserContext.Provider>
  )
}

方案二：使用Gatsby数据获取钩子（推荐） #

如果需要在静态生成或服务器端渲染时就获取用户数据，避免客户端hydrate后的状态跳转，可以使用Gatsby的getServerSideProps或getStaticProps在构建/请求阶段获取数据：

// parent 组件修改后的代码
interface PagePropsWithUser extends PageProps {
  initialUser: Nullable<User>
}

const Page: React.FC<PagePropsWithUser> = ({ initialUser }) => {
  // 直接用服务端传递的初始数据初始化状态
  const [user, setUser] = useState<Nullable<User>>(initialUser)
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [isLoaded, setIsLoaded] = useState<boolean>(!!initialUser)

  return (
    <UserContext.Provider value={{
      user: user,
      isLoading: isLoading,
      isLoaded: isLoaded,
    }}>
      <Navbar />
      <Main />
    </UserContext.Provider>
  )
}

// 服务器端请求用户数据，每次页面请求都会执行
export async function getServerSideProps() {
  try {
    const user = await loadUser()
    return {
      props: {
        initialUser: user,
      },
    }
  } catch (error) {
    return {
      props: {
        initialUser: null,
      },
    }
  }
}

export default Page

额外注意点 #

• 确保子组件导入的UserContext是从父组件文件正确导出的，避免因导入路径错误创建多个Context实例
• 若使用方案一，生产环境下静态页面会先显示加载状态，客户端hydrate完成后才会显示用户数据，属于正常的前后端交互流程

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