Heim  >  Fragen und Antworten  >  Hauptteil

Beim Abfragen von Benutzerdaten, die ein Array in Firebase enthalten, über onAuthStateChanged tritt ein Endlosschleifenproblem auf

<p>Meine aktuelle Umgebung ist ReactJS 18.2.0, läuft mit Firebase 10. </p> <p>Das Problem, das ich derzeit habe, besteht darin, onAuthStateChanged zu verwenden, um Daten über den Benutzer abzufragen, wenn er die Seite lädt oder sich anmeldet. </p> <p>Das Folgende ist ein Beispielcode-Snippet für einen benutzerdefinierten Dienst, der Firebase Auth verarbeitet. </p> <p>Alle Einstellungen sind Teil des Kontexts und alle useState. </p> <pre class="brush:js;toolbar:false;">const subscribeToAuthChanges = ( handleAuthChange, setLoadingState, setUserRole, setEmail, setFirstName, setIsActive, setLastName, Ort festlegen, setUserID ) => onAuthStateChanged(auth, (user) => { if (Benutzer) { handleAuthChange(user); FirebaseFirestoreService.getUserData(user.uid).then((data) => { setUserID(user.uid); setUserRole(data.role); setEmail(data.email); setFirstName(data.firstName); setIsActive(data.isActive); setLastName(data.lastName); setLocation(data.location); }); setLoadingState(false); } anders { setLoadingState(false); } }); }; </pre> <p>FirebaseFirestoreService.getUserData()-Funktion</p> <pre class="brush:js;toolbar:false;">const getUserData = async (id) => const docRef = doc(db, "Benutzer", id); const docSnap = waiting getDoc(docRef); if (docSnap.exists()) { return docSnap.data(); } anders { null zurückgeben; } }; </pre> <p>Dies sollte nicht innerhalb von useEffect ausgeführt werden, der Kontext wurde dafür erstellt.</p> <pre class="brush:js;toolbar:false;">import React, { useState } from "react"; importiere FirebaseAuthService aus „../Services/FirebaseAuthService“; const FirebaseAuth = React.createContext({ Benutzer: null, Laden: wahr, Rolle: "", E-Mail: "", Vorname: "", isActive: falsch, Nachname: "", Ort: "", Benutzer-ID: "", }); export const FirebaseAuthProvider = ({children }) => { const [user, setUser] = useState(null); const [role, setRole] = useState(null); const [email, setEmail] = useState(""); const [firstName, setFirstName] = useState(""); const [isActive, setIsActive] = useState(false); const [lastName, setLastName] = useState(""); const [location, setLocation] = useState(""); const [userID, setUserID] = useState(""); const [loading, setLoading] = useState(true); FirebaseAuthService.subscribeToAuthChanges( setUser, setLoading, setRole, setEmail, setFirstName, setIsActive, setLastName, Ort festlegen, setUserID ); zurückkehren ( <FirebaseAuth.Provider Wert={{ Benutzer, Wird geladen, Rolle, Email, Vorname, Familienname, Nachname, ist aktiv, Standort, Benutzer-ID, }} > {Kinder} </FirebaseAuth.Provider> ); }; Standard-FirebaseAuth exportieren; </pre> <p> Verwenden Sie onAuthStateChanged(), um die Firebase-Funktion zu aktivieren.</p> <p>有没有办法读取数组而不遇到这个问题?</p> <p>复POST请求.</p>
P粉253518620P粉253518620450 Tage vor396

Antworte allen(1)Ich werde antworten

  • P粉978742405

    P粉9787424052023-08-19 14:46:23

    你的循环运行的原因是因为你没有在副作用中设置onAuthStateChanged(),请尝试以下操作

    const FirebaseAuth = React.createContext({
      user: null,
      loading: true,
      role: '',
      email: '',
      firstName: '',
      isActive: false,
      lastName: '',
      location: '',
      userID: '',
    });
    
    export const FirebaseAuthProvider = ({ children }) => {
      const [user, setUser] = useState(null);
      const [role, setRole] = useState(null);
      const [email, setEmail] = useState('');
      const [firstName, setFirstName] = useState('');
      const [isActive, setIsActive] = useState(false);
      const [lastName, setLastName] = useState('');
      const [location, setLocation] = useState('');
      const [userID, setUserID] = useState('');
    
      const [loading, setLoading] = useState(true);
    
      useEffect(() => {
        onAuthStateChanged(auth, (user) => {
          setLoading(true);
          if (user) {
            setUser(user);
            FirebaseFirestoreService.getUserData(user.uid).then((data) => {
              setUserID(user.uid);
              setUserRole(data.role);
              setEmail(data.email);
              setFirstName(data.firstName);
              setIsActive(data.isActive);
              setLastName(data.lastName);
              setLocation(data.location);
            });
            setLoadingState(false);
          } else {
            setLoadingState(false);
          }
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
    
      return (
        <FirebaseAuth.Provider
          value={{
            user,
            loading,
            role,
            email,
            firstName,
            lastName,
            isActive,
            location,
            userID,
          }}
        >
          {children}
        </FirebaseAuth.Provider>
      );
    };
    
    export default FirebaseAuth;

    Antwort
    0
  • StornierenAntwort