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

Question

Meine aktuelle Umgebung ist ReactJS 18.2.0, läuft mit Firebase 10.

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.

Das Folgende ist ein Beispielcode-Snippet für einen benutzerdefinierten Dienst, der Firebase Auth verarbeitet.

Alle Einstellungen sind Teil des Kontexts und alle useState.

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

FirebaseFirestoreService.getUserData()-Funktion

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

Dies sollte nicht innerhalb von useEffect ausgeführt werden, der Kontext wurde dafür erstellt.

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;

Verwenden Sie onAuthStateChanged(), um die Firebase-Funktion zu aktivieren.

有没有办法读取数组而不遇到这个问题？

复POST请求.

Answer 1

你的循环运行的原因是因为你没有在副作用中设置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;