强制刷新是Next.js中访问未定义路径或错误页面的后果
P粉254077747
P粉254077747 2024-04-05 08:32:46
0
1
482

访问未定义的路径或错误页面会导致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);
}

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

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

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

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

P粉254077747
P粉254077747

全部回复(1)
P粉511749537

我通过只在上下文文件中设置状态,而不在任何其他地方设置状态来解决了我的问题。简而言之,我在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);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!