我正试图从Firestore的一个集合中提取文档,并通过一个平面列表显示出来.但它显示了一个加载循环(IDK,它实际上被称为)!
如果有什么不同,我会用自己的手机测试这个应用程序.(我对此很陌生)
Here is a screenshot of my items screen where items are to be displayed:
这是我的代码:
const Items = () => {
const [isLoading, setIsLoading] = useState(false)
const [isMoreLoading, setIsMoreLoading] = useState(false)
const [last, setLast] = useState(null)
const [items, setItems] = useState([])
let onEndReachedCalledDuringMomentum = false;
const itemsLoc = db.collection('items')
useEffect(() => {
getItems();
}, []);
getItems = async () => {
setIsLoading(true);
const snapshot = await itemsLoc.get();
if(!snapshot.empty){
let newItems = [];
setLast(snapshot.docs[snapshot.docs.length-1]);
for (let i = 0; i < snapshot.docs.length; i++){
newItems.push(snapshot.docs[i].data());
}
setItems(newItems)
}else{
setLast(null);
}
setIsLoading(false);
}
getMore = async () => {
if (last){
setIsMoreLoading(true);
let snapshot = await itemsLoc.orderBy('id').startAfter(last.data().id).limit(3).get();
if(!snapshot.empty){
let newItems = items;
setLast(snapshot.docs[snapshot.docs.length - 1]);
for (let i = 0 ; i < snapshot.docs.length; i++){
newItems.push(snapshot.docs[i].data());
}
setItems(newItems);
if(snapshot.docs.length < 3) setLast(null);
}else{
setLast(null)
}
setIsMoreLoading(false);
}
onEndReachedCalledDuringMomentum = true;
}
renderList = ({name,desc,image}) => {
return(
<View style={styles.container}>
<Image source={{uri: image}} style={styles.imageContainer}/>
<View style={styles.itemInfoContainer}>
<View>
<Text style={styles.title}>{name}</Text>
</View>
<View>
<Text style={styles.description}>{desc}</Text>
</View>
</View>
</View>
)
}
renderFooter = () => {
if (isMoreLoading) {return true;}
return <ActivityIndicator size="large" color="#64aeae" style={{ marginBottom:10 }}/>
}
onRefresh = () => {
getItems();
}
return(
<View style={{marginTop: 20}}>
<FlatList
showsVerticalScrollIndicator={false}
data={items}
keyExtractor={item => item.id}
renderItem={({item}) => renderList(item)}
ListFooterComponent = {renderFooter}
initialNumToRender={3}
onEndReachedThreshold = {0.1}
refreshing={
<RefreshControl
refreshing = {isLoading}
onRefresh = {onRefresh}
/>
}
onMomentumScrollBegin={() => onEndReachedCalledDuringMomentum = false}
onEndReached = {() => {
if (!onEndReachedCalledDuringMomentum && !isMoreLoading){
getMore();
}
}}
/>
</View>