Obtengo mis datos de firebase, inserto los datos en una matriz y represento los elementos en el componente de lista plana. ¿Qué me perdí?
pero enumere los elementos solo por un tiempo muy corto.
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' }, })Gracias por tu tiempo. Realmente me atasqué.
Tiene setEvents(eventData) en el map() , por lo que después de cada iteración, el estado se actualiza. En su lugar, analice los datos y luego actualice el estado una vez.
querySnapshot.then(querySnapshot => { querySnapshot.docs.map(doc => { eventData.push(doc.data()) }) // After iterating over all docs setEvents(eventData) });