Tengo una lista plana que recibe eventIds como datos. En cada llamada de renderItem, quiero encontrar el objeto de evento correspondiente a cada eventId en firebase y representar estos datos. (Por ejemplo, título o imagen de este evento)

Esta es la función para obtener un solo evento de firestore basado en eventId:

 export async function getSingleEventDataFireStore(eventId) { const db = firebase.firestore(); const eventFirestoreDoc = db.collection("events").doc(eventId); const doc = await eventFirestoreDoc.get(); if (!doc.exists) { console.log("No such Event!"); } else { console.log("Event data fetched!"); return await doc.data(); } }

aquí es donde se muestra la lista plana:

 const EventScreen = () => { const [event, setEvent] = useState([]); const [eventFetched, setEventFetched] = useState(false); const eventIds = [{id:'1', eventId: 'jaelfmk130'}, {id:'2', eventId: '1jlk335n1'}] const renderItem = ({ item }) => { if (!eventFetched) { firestore.getSingleEventDataFireStore(item.eventId).then((eventItem) => { setEvent(eventItem); setEventFetched(true); }); } setEventFetched(false) return ( <View><Text>{event.title}</Text></View> ) } return ( <View> <FlatList data={eventIds} keyExtractor={(item) => item.id} renderItem={renderItem} /> </View> ) }

Esto termina en un bucle infinito, porque configuré eventFetched en falso nuevamente durante renderItem. De lo contrario, si elimino setEventFetched (falso), solo representa un elemento.

¿Cómo puedo establecer eventFetched en falso después de la representación de cada elemento sin terminar en un bucle?