javascript - React-Native 无限循环

Question

我正在尝试从我firebase-firestore的 I 中获取数据，并显示加载状态以等待数据加载，但是当它加载时，它会无限次返回 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>
    )
}

标签： javascriptreactjsreact-nativereact-hooks

Answer 1

尝试传递一个空数组作为参数，useEffect如下所示：

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