Tengo esta función asíncrona llamada getRecados() que llega a firebase y toma todos los datos que necesitaré para renderizar mi lista plana:
const getRecados = () => { setRefreshing(true) try { const recadosRef = firebase.firestore().collection('recados'); recadosRef.orderBy('timestamp', 'desc').get().then(snapshot => { const recadosList = new Array() // Does some filtering on the data it just grabbed from firebase if (user_setor.length == 0) { snapshot.forEach(doc => { if ((doc.data().curso_dest == user_curso || doc.data().curso_dest == '') && (doc.data().ano_dest == user_ano || doc.data().ano_dest == '') && (doc.data().turno_dest == user_turno || doc.data().turno_dest == '')) recadosList.push(doc) }) } else { snapshot.forEach(doc => { if (user_setor.includes(doc.data().remetente)) { recadosList.push(doc) } }) } // fullData is an useState setFullData(recadosList.map((doc) => ({ id: doc.id, titulo: doc.data().titulo, timestamp: doc.data().timestamp, remetente: doc.data().remetente, curso_dest: doc.data().curso_dest, ano_dest: doc.data().ano_dest, turno_dest: doc.data().turno_dest, texto: doc.data().texto }))) setLoading(false) setRecados(fullData) }) } catch (err) { Alert.alert("Erro ao consultar os recados!!!", err.message); } setRefreshing(false) };Y lo llamo tan pronto como se muestra la pantalla de inicio con:
useEffect(() => { getRecados() }, []);Pero cuando abro la pantalla de inicio por primera vez, flatList está vacía, pero cuando ejecuto getRecados() nuevamente con un botón, flatList funciona bien y muestra los datos de firebase, por lo que concluí que flatList se está procesando antes que getRecados( ) puede establecer el valor de fullData por primera vez, entonces, ¿cómo hago para que espere a que getRecados termine lo que sea que esté haciendo?
Aquí está el código de la lista plana:
<FlatList data={recados} onRefresh={getRecados} refreshing={refreshing} showsVerticalScrollIndicator={false} renderItem={({ item }) => ( <Card texto={item.texto} titulo={item.titulo} timestamp={item.timestamp} info1={item.remetente} info2={ "ao " + item.ano_dest + "º " + item.curso_dest + " " + item.turno_dest } /> )} />;Probé la sugerencia de Ashish de usar Promise/Then en lugar de Async/Await y funcionó, usando .get().then() resolvió el problema de que los datos no se cargaban en useEffect pero solo cargó 4 de los 15 documentos que tenía en firebase por alguna razón, así que lo que funcionó para mí fue usar la función .onSnapshot() de firebase en lugar de .get() , aquí está el código resultante:
const getRecados = async () => { setRefreshing(true); try { const recadosRecebidos = firebase .firestore() .collection("recados") .orderBy("timestamp", "desc") .onSnapshot( snapshot => { /* * Just filtering the data, has nothing to do with the problem; */ } return result }, []); setFullData(recadosList); setRecados(recadosList); }, () => { setError(true); } ); setLoading(false); } catch (err) { Alert.alert("Erro ao consultar os recados!!!", err.message); } setRefreshing(false); };Simplemente tenga una condición para no mostrar FlatList hasta que finalice su llamada API. Ya está administrando la variable de loading , así que utilícela solo como
if(loading){ // Show loader or actvityIndicator } else{ // Your flat list code. }