Бесконечный цикл React-Native - PullRequest
Новая
       105

Бесконечный цикл React-Native

0 голосов
/ 05 августа 2020

Я пытаюсь получить данные из своего firebase-firestore Я показываю состояние загрузки, чтобы дождаться загрузки данных, однако, когда он загружается, он продолжает возвращать данные firestore бесконечное количество раз. Пожалуйста, помогите мне.

Это мой код Paper это просто пользовательский компонент 

import Paper from '../Components/Paper'
import firebase from 'firebase'
import { useState } from 'react'

const Home = (props) => {
    const renderMealItem = (itemData) =>{
        return (
            <Paper 
                title={itemData.item.name}
                serves={itemData.item.servings}
                time={itemData.item.time}
                image={itemData.item.imageUri}

            />
        )
    }
    const [loading, setLoading] = useState(false)
    const [all, setAll] = useState([])
    
    useEffect(() => {
        setLoading(true)
        checkReturn()
        getUser()
        
    },[])

    const checkReturn = () => {
        if(all !== undefined){
            setLoading(false)
        }
    }

    const getUser = async() => {
        try {
            await firebase.firestore()
            .collection('Home')
            .get()
                .then(querySnapshot => {
                    querySnapshot.docs.forEach(doc => {
                        setAll(JSON.stringify(doc.data()));
                    });
                });
                    
        }catch(err){
            console.log(err)
        }
        
    }
    return(
        <View style={styles.flatContainer}>
            <FlatList
                data={all}
                keyExtractor={(item, index) => index.toString()}
                renderItem={renderMealItem}/> 
        </View>
    )
}

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

useEffect без второго параметра будет выполняться при каждом обновлении. 

    useEffect(() => {
        setLoading(true)
        checkReturn()
        getUser()
        
    })

, поэтому это установит загрузку и попытается получить пользователя. и когда данные приходят с сервера, он будет запущен снова.

Таким образом, вы должны изменить его на: useEffect(() => {...}, []), чтобы он выполнялся только на этапе монтирования (начало).

Обновление: вы следует проверять возврат при каждом обновлении, а не только при запуске. поэтому измените код на: 

    useEffect(() => {
        setLoading(true)
        getUser()  
    }, [])
    useEffect(() => {
        checkReturn()
    })

Ps: есть еще одна проблема с вашим кодом: 

querySnapshot.docs.forEach(doc => {
  setAll(JSON.stringify(doc.data()));
});

возможно, это должно быть так: 

setAll(querySnapshot.docs.map(doc => JSON.stringify(doc.data())));
0 голосов
/ 05 августа 2020

Попробуйте передать пустой массив в качестве аргумента функции useEffect, например: 

   useEffect(() => {
        setLoading(true)
        checkReturn()
        getUser()
        
    }, [])
...