React Native无限循环

Question

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

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

Answer 2

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

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

}, [])