0
votes

Reprendre l'useEffect provoquant une boucle infinie même lorsque des dépendances sont répertoriées (avec la base de données Firebase Realtime)

J'ai essayé de résoudre ce problème, mais quelle que soit la solution que je fais, elle est toujours bloquée dans une boucle infinie.

Voici le code

    const [carr, setCarr] = useState({})

    useEffect(() => {
    sortedRosterCollection.once('value', (snap) => {
        snap.forEach((doc) =>{
            if (doc.key==="Carr Intermediate"){
                var school = doc.key;
                var mentorList = doc.val();
                var schoolMentor = {school:school, mentors: mentorList};
                setCarr(schoolMentor)
                console.log(carr)
            }
        });
    });

},[carr]);

Quoi que je fasse, "console.log (carr)" est déclenché à l'infini.

firebase reactjs react-hooks loops infinite

1 commentaires

Vous définissez la valeur carr dans le même useEffect qui est déclenché lorsque carr est modifié, provoquant une boucle infinie. Vous ne voyez pas pourquoi vous devez l'avoir dans la liste des dépendances.

3 Réponses :

0
votes

Si vous souhaitez inspecter la valeur de carr chaque fois qu'elle est modifiée, mettez-la dans un autre effet d'utilisation:

const [carr, setCarr] = useState({})

useEffect(() => {
  sortedRosterCollection.once('value', (snap) => {
    snap.forEach((doc) => {
      if (doc.key === "Carr Intermediate") {
        var school = doc.key;
        var mentorList = doc.val();
        var schoolMentor = {
          school: school,
          mentors: mentorList
        };
        setCarr(schoolMentor)
      }
    });
  });

}, []);

useEffect(() => {
  console.log(carr)
}, [carr])

0 commentaires

0
votes

Vous n’oubliez pas la fonction de nettoyage dans useEffect hook comme ceci:

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

0 commentaires

0
votes

J'avais l'habitude de faire ce problème comme vous parce que useEffect peut comparer deux objets. Vous pouvez faire la référence au lien: https: / /medium.com/javascript-in-plain-english/comparing-objects-in-javascript-ce2dc1f3de7f . Et je vérifie les modifications en utilisant le code ci-dessous:

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

0 commentaires