Javascript 反应：从未调用清除函数

我正在构建一个使用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");
}

当我删除组件时，在控制台中看不到“删除的侦听器”。 我知道，当依赖项数组更改或组件卸载时，会调用clean-up函数

有什么想法或提示吗？

我发现了错误：

清理功能必须在钩子的函数体中定义，而不是在其他函数中定义，如下所示：

  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();
    };
  }, []);

我发现了错误：

清理功能必须在钩子的函数体中定义，而不是在其他函数中定义，如下所示：

  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();
    };
  }, []);