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>