即使列出了依赖关系，React useEffect也会造成无限循环（使用Firebase实时数据库）。

Question

我一直在尝试解决这个问题，但无论我做什么解决方法，它仍然卡在一个无限循环中。

以下是代码

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

无论我怎么做 "console.log(carr) "都会被无休止的发射。

Answer 1

如果你想检查 carr 每当它被改变的时候，就把它放到另一个使用效果中。

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])

Answer 2

你不要忘了使用效果钩子的清理功能，像这样。

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

Answer 3

我以前也像你一样犯过这个问题，因为useEffect可以比较两个对象，你可以做链接的引用。https:/medium.comjavascript-in-plain-englishcomparing-objects-in-javascript-ce2dc1f3de7f。. 我用下面的代码检查改变。

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