获取Firebase数据库（）时如何正确清理函数（）？

Question

我收到以下错误。我认为这是因为即使我的组件卸载，我仍然订阅了 Firebase 数据库。我正在尝试利用实时功能，以便每当从列表中删除项目时，它都会反映在 UI 上。

我已经创建了多个函数来获取不同的文档。下面是一个例子。

export const getAllTask = (userId) => {
  return new Promise((resolve, reject) => {
    const db = database.ref('tasks');

    db.child(`${userId}/taskItems`).on('value', (snapshot) => {
      const user = snapshot.val();
      if (user) {
        resolve(user);
      } else {
        reject(user);
      }
    });
  });
};

然后，每当我的任何组件时，它都会运行我的 useEffect 来获取数据，但是当它卸载时，我如何才能正确使用 off() 或正确清理？有没有更好的方法来做到这一点？

useEffect(() => {
  const test = async (userId) => {
    await getAllTask(userId).then((result) => {
      setItems(result);
    });
  };
  test(userId);
}, [userId]);

Answer 1

试试这个，useEffect 返回一个在组件卸载时调用的函数

useEffect(() => {
     let mounted=true;
    const test = async (userId) => {
       await getAllTask(userId).then((result) => {
         if(mounted) setItems(result)
      });
    };
   test(userId);
   return ()=>{mounted=false}
  }, [userId]);

Answer 2

在这种情况下，您根本不应该使用on()。将once() 用于reading data a single time。它返回一个易于使用的承诺。 on() 用于持久侦听器，每次查询结果发生变化时，它们都会随着时间的推移提供更新。

由于 Promise 只能解析一次，因此在 Promise 中包装持久监听器是没有意义的。

如果您确实确实希望监听器随着时间的推移而更新，只要组件已挂载，就不要将其包装在 Promise 中。相反，您应该指示您的 useEffect 取消订阅侦听器，方法是返回一个它可以调用以关闭事物的函数。

另请参阅：How to properly update state with Firebase and useEffect()? 在那里的答案中，查看 useEffect 挂钩如何返回调用 off() 的函数。