尝试使用 Firebase 时 useEffect 内部的无限循环答案

【问题标题】：Infinite loop inside useEffect while trying to use Firebase尝试使用 Firebase 时 useEffect 内部的无限循环
【发布时间】：2020-07-01 02:24:54
【问题描述】：

我正在构建一个应用来记下电表和燃气表的值：https://n3g.gitlab.io/react-conso-energie/

如果您检查控制台，您会看到一个 console.log 的无限打印。

虽然我在第 36 行添加了 [dbRef] 检查，但我不明白为什么我的 useEffet（第 19 行）会被无限触发。

在我的想象中，只有在我的数据库中添加或删除东西时才会触发它？

谢谢你，如果有人可以看一下，因为几周以来我一直在为此苦苦挣扎。当我尝试从我的数据库中获取数据时，我确实相信我已经把事情复杂化了..

【问题讨论】：

【解决方案1】：

尝试使用 useRef 钩子包装 firebase.database().ref('2020')，如下所示：

const dbRef = useRef(firebase.database().ref('2020'));

并从 useEffect deps 数组中删除 dbRef，将用法从 dbRef 更改为 dbRef.current

【讨论】：

谢谢，是的，它可以工作，但是当我添加或删除项目时，显示现在不会刷新。
您的数据来自firebase数据库，您将回调函数传递给此方法dbRef.orderByChild('trueDate').once您设置状态，但它在useEffect中调用一次，在第一个组件渲染时，例如当您调用handleDelete 方法时，您只需更新数据库中的数据，为了查看更改，您必须再次调用此函数dbRef.orderByChild('trueDate').once 并在其回调函数中更新状态。
谢谢，我明白了。事实上，最后一部分是我的错，我使用 .once 而不是 .on 检索数据 - 现在我什至不必重新执行某些操作即可在删除或添加项目后获取数据。