強制刷新是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);
}