Firebase с функцией очистки useeffect - PullRequest
Новая
       0

Firebase с функцией очистки useeffect

0 голосов
/ 19 октября 2019

Я пытаюсь получить все данные с помощью параметра 'public' коллекции firebase и затем использовать useffect, но консоль выдвигает ошибку.

Я взял эту структуру из документации firebase: https://firebase.google.com/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection

, но консоль говорит: «Предупреждение: не удается выполнить обновление состояния React для неустановленного компонента. Это не работает, но это указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect '

Так что я перешел на эту другую страницу: https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener

Но я не использую onSnapshot, кроме документации Firebaseнеправильно для меня, поскольку unub не является функцией. 

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

    }, [])

1 Ответ

0 голосов
/ 21 октября 2019

Вам необходимо вызвать функцию слушателя для отсоединения и размонтирования. 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

    }, [])
...