javascript - 获取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]);

标签： javascriptreactjsfirebasefirebase-realtime-databaseasync-await

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]);