React-Native 无限循环答案

【问题标题】：React-Native infinite loopReact-Native 无限循环
【发布时间】：2020-08-05 17:58:55
【问题描述】：

我正在尝试从我的 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>
    )
}

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

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())));

【讨论】：

嘿，感谢您的快速响应，但是即使尝试了空参数，它仍然会无限返回
嘿，谢谢，我也收到错误Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android 根据我的代码，您知道为什么返回此错误是无穷大吗
@DilhanBhagat 上一个问题修复了吗？我不确定这条消息在说什么，因为目前您的代码中没有任何计时器。
是的，它修复了它，但由于某种原因，FlatList 仍然显示Paper 组件的无限空白渲染，即使从 concole 日志记录中只有一个 Object 从 firestore 返回.如果一段时间以来一直出现此错误，请帮助我。提前谢谢你
@DilhanBhagat 也许您没有注意到我的答案的更新版本。（ps部分）

【解决方案2】：

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

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

【讨论】：

嘿，感谢您的快速响应，但是即使尝试了空参数，它仍然会无限返回
@DilhanBhagat checkReturn 函数在做什么？
刚刚用函数更新了代码。对不起，我忘了包括它。