Eine erzwungene Aktualisierung ist eine Folge des Zugriffs auf undefinierte Pfade oder Fehlerseiten in Next.js

Question

Der Zugriff auf einen undefinierten Pfad oder eine Fehlerseite führt dazu, dass Next.js eine harte Aktualisierung durchführt, wodurch mein Kontext in seinen Standardzustand zurückkehrt (d. h. der in der Variablen userProfilestate gespeicherte Wert wird null)

Ich habe ein Layout mit {sucture: Sidebar and main} und in der Sidebar-Komponente zeige ich die Benutzer-E-Mail, die ich vom Kontext-Hook erhalte, als Statusvariable an.

Wenn ich jedoch auf einen undefinierten Pfad klicke oder die URL manuell eingebe, wird eine benutzerdefinierte Fehlerseite auf die Indexseite ('/') zurückgeworfen, aber dadurch verliere ich meinen Status wieder auf null (Kontext).

Meine Kontextdatei sieht wie folgt aus

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);
}

Ich habe meinen Status (bei Erfolg) im Login-Handler der Login-Seite festgelegt.

Gibt es eine Problemumgehung oder sollte ich lokalen Speicher verwenden?

Derzeit erhalte ich wieder das Benutzerprofil, wenn er zur Indexseite zurückkommt.

Ich denke, lokaler Speicher könnte eine bessere Option sein.

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);
}