Maison  >  Questions et réponses  >  le corps du texte

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

<p>Mon environnement actuel est ReactJS 18.2.0, fonctionnant avec Firebase 10. </p> <p>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. </p> <p>Ce qui suit est un exemple d'extrait de code pour un service personnalisé qui gère l'authentification Firebase. </p> <p>Tous les paramètres font partie du contexte et sont tous useState. </p> <pre class="brush:js;toolbar:false;">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é> <p>Fonction FirebaseFirestoreService.getUserData()</p> <pre class="brush:js;toolbar:false;">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é> <p>Cela ne doit pas être exécuté dans useEffect, le contexte a été créé pour gérer cela.</p> <pre class="brush:js;toolbar:false;">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 ( <FirebaseAuth.Provider valeur={{ utilisateur, chargement, rôle, e-mail, prénom, nom de famille, c'est actif, emplacement, ID de l'utilisateur, }} > {enfants} </FirebaseAuth.Provider> ); } ; exporter FirebaseAuth par défaut ; ≪/pré> <p> Il s'agit de la fonction onAuthStateChanged() et de la fonction Firebase.</p> <p> <p>复POST请求。</p>
P粉253518620P粉253518620450 Il y a quelques jours398

répondre à tous(1)je répondrai

  • P粉978742405

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

    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;

    répondre
    0
  • Annulerrépondre