即使列出了依赖项，也反应 useEffect 导致无限循环（使用 Firebase 实时数据库）答案

【问题标题】：React useEffect causing infinite loop even when dependencies are listed (with Firebase realtime database)即使列出了依赖项，也反应 useEffect 导致无限循环（使用 Firebase 实时数据库）
【发布时间】：2020-05-14 08:13:18
【问题描述】：

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

这里是代码

    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)”都会被无休止地触发。

【问题讨论】：

您在 carr 更改时触发的同一 useEffect 中设置了 carr 值，从而导致无限循环。不明白为什么需要将它放在依赖列表中。

标签： reactjs firebase loops react-hooks infinite

【解决方案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])

【讨论】：

【解决方案2】：

你不要忘记 useEffect 挂钩中的清理功能，如下所示：

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

【讨论】：

【解决方案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;
}

【讨论】：