React useEffect导致无限循环，即使列出了依赖项（带有firebase实时数据库）

Question

过去6个小时我一直在尝试解决此问题，但是无论我采取什么解决方案，它仍然陷于无限循环中

这里是代码

    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挂钩中的清理功能，如下所示：

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

Answer 3

我曾经像您一样使这个问题出现，因为useEffect可以比较两个对象。您可以引用链接：https://medium.com/javascript-in-plain-english/comparing-objects-in-javascript-ce2dc1f3de7f。我使用以下代码检查更改：

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