强制刷新是Next.js中访问未定义路径或错误页面的后果

Question

访问未定义的路径或错误页面会导致Next.js进行硬刷新，从而导致我的上下文回到默认状态（即存储在userProfile状态变量中的值变为null）

我有一个布局，使用{stucture：Sidebar和main}，在Sidebar组件中，我显示用户电子邮件，我从上下文钩子作为状态变量获取。

但是，当我点击未定义的路径或在URL中手动输入时，我会抛出一个自定义错误页面，返回到索引页面（'/'），但由于这个原因，我失去了我的状态回到null（上下文）。

我的上下文文件如下所示

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

const UserContext = createContext();

export function UserProvider({ children }) {
  const [userProfile, setUserProfile] = useState(null);

  return (
    <UserContext.Provider value={{ userProfile, setUserProfile }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUserContext() {
  return useContext(UserContext);
}

我在登录页面的登录处理程序中设置我的状态（成功时）。

是否有任何解决方法，或者我应该使用本地存储

目前，当他回到索引页面时，我会再次获取用户配置文件。

我认为本地存储可能是一个更好的选择。

Answer 1

我通过只在上下文文件中设置状态，而不在任何其他地方设置状态来解决了我的问题。简而言之，我在context.js文件中获取用户的个人资料数据，并在那里设置状态，这样可以在任何地方使用。如果有人遇到相同的问题，请提到我！

我的context.js文件如下所示

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

const UserContext = createContext();

export function UserProvider({ children }) {
  const [userProfile, setUserProfile] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserProfile = async () => {
      try {
        const res = await fetch(process.env.NEXT_PUBLIC_API_DOMAIN + '/userProfile');
        const userData = await res.json();
        setUserProfile(userData);
        setLoading(false);
      } catch (error) {
        console.error("Error fetching user profile:", error);
        setLoading(false);
      }
    };

    fetchUserProfile();
  }, []);

  return (
    
      {children}
    
  );
}

export function useUserContext() {
  return useContext(UserContext);
}