React - 从 Firebase 检索和打印数据

Question

我是 React 的初学者，我正在尝试了解事情是如何工作的。我尝试使用 Firebase 数据库进行试验，但我不了解其行为。

这里是 CodeSandBox：https://codesandbox.io/s/react-and-firebase-d3elg

首先，当您打开页面时，您会在控制台中看到：

First ?undefined 
First ?undefined 
Second ?undefined 
Second ?undefined 

未定义的东西还好，后面再讲，为什么会打印两次呢？

然后，如果你取消注释第 24 行，我强烈不推荐 :D，你会开始一个无限循环，非常激进。我原以为它只会触发“一次”，就像它在第 10 行上写的那样，但显然它没有......

谁能帮我理解一下？

非常感谢。

Answer 1

您需要将任何想要运行一次的代码放入一个带有空数组依赖项的 useEffect 中，以使其仅运行一次。

但在下面我编辑沙箱的示例中，我将 dbRef 作为依赖项放入，因此每当该值更改时，都会再次调用该函数。

https://reactjs.org/docs/hooks-effect.html

https://codesandbox.io/s/react-and-firebase-xir7p?fontsize=14&hidenavigation=1&theme=dark