我正在构建一个使用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");
}
当我删除该组件时,在控制台中看不到“已删除的侦听器”。 我知道当依赖项数组发生更改或卸载组件时会调用清除函数。
有什么想法或提示吗?
答案 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();
};
}, []);