反应:从未调用过清理功能

时间:2020-07-15 16:09:52

标签: javascript reactjs firebase google-cloud-firestore

我正在构建一个使用Firebase和Firestore的React应用。

我正在使用onSnapshot函数,因此我从Firestore获取了实时数据,但是我想知道如何删除该侦听器。

是的,我知道,我必须使用useEffect钩子的清理功能,但是我无法使其正常工作,这是我的代码:

useEffect(() => {
    let removeListener = getCanzoni(utente).onSnapshot(function (querySnapshot) {
      let promises = querySnapshot.docs.map(async function (doc) {
        let canzone = doc.data();
        canzone.id = doc.id;

        return canzone;
      });

      Promise.all(promises).then((canzoni) => {
        cambiaCanzoni(canzoni);
      });

      return function cleanup() {
        console.log("Removed Listener");
        removeListener();
      };
    });
  }, []);

getCanzoni函数是从另一个文件导入的,其定义是:

export function getCanzoni(utente) {
  return firestore
    .collection("Canzoni")
    .where("utente", "==", utente.uid)
    .orderBy("data", "desc");
}

当我删除该组件时,在控制台中看不到“已删除的侦听器”。 我知道当依赖项数组发生更改或卸载组件时会调用清除函数。

有什么想法或提示吗?

1 个答案:

答案 0 :(得分:2)

我发现了错误:

清理函数必须在钩子的函数主体中定义,而不是在其他函数中定义,如下所示:

  useEffect(() => {
    let removeListener = getCanzoni(utente).onSnapshot(function (querySnapshot) {
      let promises = querySnapshot.docs.map(async function (doc) {
        let canzone = doc.data();
        canzone.id = doc.id;

        return canzone;
      });

      Promise.all(promises).then((canzoni) => {
        cambiaCanzoni(canzoni);
      });
    });

    return function cleanup() {
      console.log("Tolto il listener");
      removeListener();
    };
  }, []);