访问未定义的路径或错误页面会导致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); }
我在登录页面的登录处理程序中设置我的状态(成功时)。
是否有任何解决方法,或者我应该使用本地存储
目前,当他回到索引页面时,我会再次获取用户配置文件。
我认为本地存储可能是一个更好的选择。
我通过只在上下文文件中设置状态,而不在任何其他地方设置状态来解决了我的问题。简而言之,我在context.js文件中获取用户的个人资料数据,并在那里设置状态,这样可以在任何地方使用。如果有人遇到相同的问题,请提到我!
我的context.js文件如下所示