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作為依賴項放入，因此每當該值發生更改時，都會再次調用該函數。