Rencontre d'un problème de boucle infinie lors de l'interrogation de données utilisateur contenant un tableau dans Firebase via onAuthStateChanged

Question

Mon environnement actuel est ReactJS 18.2.0, fonctionnant avec Firebase 10.

Le problème que je rencontre actuellement est d'utiliser onAuthStateChanged pour interroger des données sur l'utilisateur lorsqu'il charge ou se connecte à la page.

Ce qui suit est un exemple d'extrait de code pour un service personnalisé qui gère l'authentification Firebase.

Tous les paramètres font partie du contexte et sont tous useState.

const SubscribeToAuthChanges = (
  handleAuthChange,
  setLoadingState,
  définir le rôle utilisateur,
  définirEmail,
  setFirstName,
  setIsActive,
  setLastName,
  définirEmplacement,
  définirUserID
) =>
  onAuthStateChanged(auth, (utilisateur) => {
    si (utilisateur) {
      handleAuthChange(utilisateur);

      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(données.location);
      });
      setLoadingState(faux);
    } autre {
      setLoadingState(faux);
    }
  });
} ;
≪/pré>
Fonction FirebaseFirestoreService.getUserData()
const getUserData = async (id) =>
  const docRef = doc(db, "utilisateurs", id);
  const docSnap = wait getDoc(docRef);
  si (docSnap.exists()) {
    return docSnap.data();
  } autre {
    renvoie null ;
  }
} ;
≪/pré>
Cela ne doit pas être exécuté dans useEffect, le contexte a été créé pour gérer cela.
importer React, { useState } depuis "react" ;
importer FirebaseAuthService depuis "../Services/FirebaseAuthService" ;

const FirebaseAuth = React.createContext({
  utilisateur : nul,
  chargement : vrai,
  rôle : "",
  email : "",
  prénom : "",
  isActive : faux,
  Nom : "",
  emplacement : "",
  ID utilisateur : "",
});

export const FirebaseAuthProvider = ({ enfants }) => {
  const [utilisateur, setUser] = useState(null);
  const [role, setRole] = useState(null);
  const [email, setEmail] = useState("");
  const [firstName, setFirstName] = useState("");
  const [isActive, setIsActive] = useState(false);
  const [nom, setLastName] = useState("");
  const [emplacement, setLocation] = useState("");
  const [IDutilisateur, setUserID] = useState("");

  const [chargement, setLoading] = useState(true);

  FirebaseAuthService.subscribeToAuthChanges(
    setUser,
    setChargement,
    setRôle,
    définirEmail,
    setFirstName,
    setIsActive,
    setLastName,
    définirEmplacement,
    définirUserID
  );

  retour (
    
      {enfants}
    
  );
} ;

exporter FirebaseAuth par défaut ;
≪/pré>
 Il s'agit de la fonction onAuthStateChanged() et de la fonction Firebase.

复POST请求。
            

Answer 1

La raison pour laquelle votre boucle est en cours d'exécution est parce que vous n'avez pas défini onAuthStateChanged() dans l'effet secondaire, veuillez essayer ce qui suit

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;