javascript - Firebase 具有 useEffect 清理功能

Question

我正在尝试使用 firebase 集合的“public”参数获取所有数据，然后使用 useffect，但控制台指责错误。

我从firebase的文档中获取了这个结构： https ://firebase.google.com/docs/firestore/query-data/get-data#g​​et_multiple_documents_from_a_collection

但控制台显示“警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务'

所以我去了另一个页面： https ://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener

但是我没有使用 onSnapshot，除了 firebase 文档对我来说似乎是错误的，因为 unsub 不是一个函数。

useEffect(() => {

        let list = []

        const db = firebase.firestore().collection('events')
        let info = db.where('public', '==', 'public').get().then(snapshot => {
            if (snapshot.empty) {
                console.log('No matching documents.');
                setLoading(false)
                return;
            }
            snapshot.forEach(doc => {
                console.log(doc.id, "=>", doc.data())
                list.push({
                    id: doc.id,
                    ...doc.data()
                })
            })
            setEvents(list)
            setLoading(false)
        })
            .catch(error => {
                setLoading(false)
                console.log('error => ', error)
            })
        return () => info

    }, [])

标签： javascriptreactjsfirebaseuse-effect

Answer 1

您需要调用侦听器函数来分离和卸载。 https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener

useEffect(() => {

        let list = []

        const db = firebase.firestore().collection('events')
        let info = ...
        return () => info() # invoke to detach listener and unmount with hook

    }, [])