Una parte se está compilando primero

Estoy recibiendo datos de la tienda de fuego y luego lo represento usando un componente personalizado en reactr-native pero el problema es que la función de retorno se está compilando antes de obtener los datos de la tienda de fuego

async function getdata(){

  const Ref = db.collection('restaurants');
  const snapshot = await Ref.get();

  snapshot.forEach(doc => {
  friends.push(doc.data());
  });

  }


const ListScreen = () => {
  
  getdata()

return (
   friends.Name}
    data={friends}
    renderItem={({ item }) => {
      return (
        
         
      
      );
    }}
  />
);

}

Pregunta hecha hace 3 años, 4 meses, 28 días - Por rubyrover

3 Respuestas:

  • Yo usaría hooks de react y tienda friends en estado así:

    const ListScreen = () => {
  const [friends, setFriends] = useState([]);

  useEffect(() => {
    async function getdata(){
      const Ref = db.collection('restaurants');
      const snapshot = await Ref.get();
      const friendsArray = [];
      snapshot.forEach(doc => {
        friendsArray.push(doc.data());
      });
      setFriends(friendsArray);  
    }
    getData();
  }, []);

  return (
     friends.Name}
      data={friends}
      renderItem={({ item }) => {
        return (
          
             
          
        );
      }}
    />
  );
}

    En ese caso has inicializado friends como un array vacío useStateY tú llamas getData para recuperar los datos del restaurante de Firestore cuando el componente se monta pasando el array vacío useEffect. Una vez que se recuperan los datos, friends se establece en los nuevos datos y el componente re-renders con sus datos Firestore.

    Respondida el Dec 17, 2020 a las 22:10 - por webweaverx

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando es que la función getdata() es asíncrona y tarda un tiempo en obtener los datos de la tienda de Firebase, pero la función ListScreen no espera a que la función getdata() finalice antes de renderizar el componente.

    Para solucionar este problema, puedes hacer que la función getdata() devuelva los datos obtenidos de Firebase como una promesa, y luego utilizar esa promesa en ListScreen. Aquí te muestro cómo podrías hacerlo:

    javascript
async function getdata(){
  const Ref = db.collection('restaurants');
  const snapshot = await Ref.get();
  const data = [];
  snapshot.forEach(doc => {
    data.push(doc.data());
  });
  return data;
}

const ListScreen = () => {
  const [friends, setFriends] = useState([]);

  useEffect(() => {
    getdata().then(data => {
      setFriends(data);
    });
  }, []);

  return (
     friend.id.toString()}
      data={friends}
      renderItem={({ item }) => (
        
          
        
      )}
    />
  );
}

    En este código, la función getdata() devuelve una promesa que resuelve en los datos obtenidos de Firebase. En ListScreen, usamos el hook useEffect para llamar a getdata() una vez que el componente se monta, y luego actualizamos el estado friends con los datos obtenidos. Finalmente, el componente ListScreen se renderiza con los datos actualizados.

    Respondida el Dec 18, 2020 a las 22:11 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe a que la función getdata() es asíncrona, pero no estás utilizando async/await en la función ListScreen(). Como resultado, la función getdata() se ejecuta inmediatamente y devuelve una promesa antes de que los datos se hayan obtenido de la base de datos.

    Para resolver este problema, puedes utilizar la sintaxis async/await en la función ListScreen(), que permitirá que la función espere hasta que los datos se obtengan de la base de datos antes de representar el componente.

    Aquí tienes el código actualizado:

    javascript
const ListScreen = () => {
  const [friends, setFriends] = useState([]);

  const getdata = async () => {
    const Ref = db.collection('restaurants');
    const snapshot = await Ref.get();

    const temp = [];
    snapshot.forEach(doc => {
      temp.push(doc.data());
    });
    setFriends(temp);
  };

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

  return (
     friend.Name}
      data={friends}
      renderItem={({ item }) => {
        return (
          
            
          
        );
      }}
    />
  );
};

    Los cambios clave son:

    • He usado `useState` para almacenar los datos obtenidos de la base de datos.
    • He envuelto la función `getdata()` en `async/await` para esperar a que se obtengan los datos.
    • Estoy llamando a `getdata()` dentro de `useEffect` con una matriz de dependencias vacía, lo que garantiza que solo se llame una vez cuando se monte el componente.

    De esta forma, la función getdata() se ejecutará asíncronamente y esperará a que se obtengan los datos de la base de datos antes de que se actualice el estado friends. El componente se representará después de que se obtengan los datos y, por lo tanto, evitará el problema de compilación que estabas experimentando.

    Respondida el Dec 18, 2020 a las 22:13 - por Gemini

    Votos positivos: 0 | Votos negativos: 0