反應：清理 function 從未調用

Question

我正在構建一個使用 Firebase 和 Firestore 的反應應用程序。

我正在使用onSnapshot function 所以我從 Firestore 獲取實時數據，但我想知道如何刪除該偵聽器。

是的，我知道，我必須使用 useEffect 掛鈎的清理 function ，但我無法讓它工作，這是我的代碼：

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 function 是從另一個文件導入的，它的定義是：

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

當我刪除組件時，我在控制台中看不到“已刪除偵聽器”。 我知道當依賴數組更改或卸載組件時會調用清理 function 。

任何想法或提示？

Answer 1

我發現了錯誤：

清理 function 必須在鈎子的 function 主體中定義，而不是在其他 function 中定義，如下所示：

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