如何正確取消訂閱 Firebase 實時數據庫的 onValue 偵聽器

Question

背景：這是一個練習 todo 列表應用程序，我使用 onValue 監聽實時數據庫中 todos 列表的更改，然后將其映射到前端的任務數組。

我以前在以下列方式使用 onValue 時出現 memory 泄漏錯誤 - 當我沒有取消訂閱我的 onValue 偵聽器時：

  useEffect(
    () => {
      if (user) {

    onValue(ref(database, `users/${user}/tasks`), (snapshot) => {
      const todos = snapshot.val();

      const tasks = [];

      for (let id in todos) {
        tasks.push({ ...todos[id], id: id })
      }

      setTasks(tasks)
    })
    
  } else {
    setTasks([])
  }
}, [user])

我從這里的一些其他問題中看到 onValue 返回一個取消訂閱 function，我還看到一個答案，通過在 onValue 行中添加返回，我可以取消訂閱 - 我嘗試在下面執行此操作：

 useEffect(
    () => {
      if (user) {

        return onValue(ref(database, `users/${user}/tasks`), (snapshot) => {
          const todos = snapshot.val();

          const tasks = [];

          for (let id in todos) {
            tasks.push({ ...todos[id], id: id })
          }

          setTasks(tasks)
        })
        
      } else {
        setTasks([])
      }
    }, [user])

它似乎對我有用，但我可以得到一些幫助來確認這是取消訂閱這個 onValue 監聽器的正確方法嗎？

Answer 1

你的useEffect回調需要返回一個取消訂閱 function，以便 React 可以在不再需要組件/掛鈎時調用它。 通過從onValue返回返回值，您可以確保在不再需要組件/掛鈎時取消訂閱onValue 。 如果那是您想要完成的（似乎是這樣），那么這看起來確實是正確的。

Answer 2

對於 Web v9， onValue()調用的結果是'unsubscriber' 。

const unsubscribe = onValue(ref(database, `sessions/${session}`), (snapshot) => {
    const sessionData= snapshot.val();
    if( sessionData.status === 'over' )
    {
         // remove the listener
         unsubscribe();
    }else{

         // Do something with the snapshot data 
    }

})