我從 firebase 獲取資料，將資料推送到陣列中并在 flatlist 組件中呈現專案。我錯過了什么？
但是 list 僅在很短的時間內呈現專案。
import React, { useState, useEffect } from 'react';
import { FlatList, Box } from "native-base";
import { StyleSheet } from 'react-native'
import EventCard from "./EventCard.js";
import { LogBox } from 'react-native';
import { ActivityIndicator } from 'react-native';
import { getFirestore, collection, getDocs } from 'firebase/firestore';
// Silent warning about https://github.com/facebook/react-native/issues/12981
LogBox.ignoreLogs(['Setting a timer']);
export default function Events() {
const [loading, setLoading] = useState(true);
const [events, setEvents] = useState({});
useEffect(() => {
let eventData = []
const firestore = getFirestore();
const querySnapshot = getDocs(collection(firestore, 'events'));
querySnapshot.then(querySnapshot => {
querySnapshot.docs.map(doc => {
eventData.push(doc.data())
setEvents(eventData)
})
});
setLoading(false);
}, []);
if (loading) {
return <ActivityIndicator />;
}
return (
<Box style={styles.container}>
<FlatList
data={events}
keyExtractor={item => item.key}
renderItem={({ item }) => (<EventCard key={Date.now()} eventData={item} />
)}
/>
</Box>
);
}
const styles = StyleSheet.create({
container: {
alignSelf: 'stretch',
alignItems: 'center'
},
})
謝謝你的時間。我真的卡住了。
uj5u.com熱心網友回復：
setEvents(eventData)在map()每次迭代之后，您都會更新狀態。而是決議資料，然后更新一次狀態。
querySnapshot.then(querySnapshot => {
querySnapshot.docs.map(doc => {
eventData.push(doc.data())
})
// After iterating over all docs
setEvents(eventData)
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/432116.html
標籤：javascript 反应 火力基地 反应式 平面列表