React - 从 Firebase 检索和打印数据

Question

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

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

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

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

undefined 的东西还好，我稍后再说，但是为什么它打印了两次？

然后，如果您取消注释第 24 行，我强烈不推荐 :D，您将开始无限循环，非常激进。我原以为它只触发 'once' 就像它在第 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