I have this async function called getRecados() that reaches out to firebase and grab all the data I will need my flatlist to render:

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)
  };

And I call it as soon as the homeScreen renders with:

useEffect(() => {
    getRecados()
  }, []);

But when I open the homeScreen for the first time the flatList is empty, but when I execute getRecados() again with a button the flatList works fine and displays the data from firebase, so that made me conclude that the flatList is rendering before getRecados() can set fullData's value for the first time, so how do I make it wait for getRecados to finish whatever its doing?

Here's the flatlist code:

<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
      }
    />
  )}
/>;

CodePudding user response：

Simply have a condition for not to show FlatList until your api call is done. You are already managing loading variable so utilise that only like

if(loading){
    // Show loader or actvityIndicator
}
else{
    // Your flat list code.
}

CodePudding user response：

If you debug your code maybe you will find that your closing the loading before setting data to to Recados.

Instead Just set data to Recados before stop loading.

const getRecados = async () => {
    setRefreshing(true)
    try {
        const recadosRef = firebase.firestore().collection('recados');
        const records = await recadosRef.orderBy('timestamp', 'desc').get();
        if(records == undefined){
            Alert.alert("Erro ao consultar os recados!!!", err.message);
        }
        const recadosList = new Array();
        if (user_setor.length == 0) {
            records.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 {
            records.forEach(doc => {
                if (user_setor.includes(doc.data().remetente)) {
                    recadosList.push(doc)
                }
            })
        }
        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
        })));
        setRecados(fullData)
        setLoading(false)
    } catch (err) {
        Alert.alert("Erro ao consultar os recados!!!", err.message);
    }
    setRefreshing(false)
};

if your using the async/await code should look like this