如何正确取消订阅 Firebase 实时数据库的 onValue 侦听器答案

【问题标题】：How to properly unsubscribe to an onValue listener for Firebase Realtime Database如何正确取消订阅 Firebase 实时数据库的 onValue 侦听器
【发布时间】：2022-01-13 15:02:00
【问题描述】：

背景：这是一个练习 todo 列表应用程序，我使用 onValue 监听实时数据库中 todo 列表的更改，然后将其映射到前端的任务数组。

我以前在以下列方式使用 onValue 时出现内存泄漏错误 - 当我没有取消订阅我的 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 返回一个取消订阅函数，我还看到一个答案，通过在 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 侦听器的正确方法？

【问题讨论】：

我在下面回答，但请注意，通常 Stack Overflow 在您发布问题时效果更好，而不是“请验证此代码似乎工作确实正确”。

标签： javascript reactjs react-native firebase-realtime-database

【解决方案1】：

你的 useEffect 回调需要返回一个取消订阅函数，以便 React 可以在不再需要组件/钩子时调用它。通过从onValue 返回返回值，您可以确保在不再需要组件/挂钩时取消订阅onValue。如果这是您想要完成的（似乎是这样），那么这看起来确实是正确的。

【讨论】：