• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

365
Views
Usando getDoc().then() dentro de un bucle Firebase

Estoy tratando de recorrer una matriz y para cada elemento de una matriz quiero usar getDoc() y luego agregar los datos del documento a una nueva matriz. Básicamente para hacer esto:

 useEffect(() => { let items = []; for(const cart_item of cartItems){ getDoc(doc(getFirestore(), 'tickets', cart_item.ticket_id)).then((ticket_item) => { items.push({...ticket_item.data()}); }); } console.log(items); }, [cartItems])

Sin embargo, la matriz de elementos aún está vacía después de un ciclo en el que lo registro. Creo que el problema es que el bucle no está esperando a que getDoc() devuelva algo y continúa. ¿Cómo hacer que espere a que termine getDoc()? He estado leyendo sobre async, espero pero todavía no entiendo cómo manejarlo.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Intente refactorizar su código con una función asíncrona como se muestra a continuación:

 useEffect(() => { const getItems = async () => { // fetching all documents by mapping an array of promises and using Promise.all() const itemsDocs = await Promise.all(cartItems.map(c => getDoc(doc(getFirestore(), 'tickets', c.ticket_id))) // mapping array of document data const items = itemsDocs.map(i => i.data()) console.log(items); } getItems(); }, [cartItems])
almost 3 years ago · Juan Pablo Isaza Report

0

Cuando llama a getDoc , debe hacer una llamada al servidor Firestore para obtener sus datos, lo que puede llevar algún tiempo. Es por eso que no devuelve inmediatamente la instantánea del documento, sino que usa una devolución de llamada then() que el SDK de Firestore llama cuando recupera los datos del servidor.


Este tipo de llamada asincrónica cambia el orden en que se ejecuta el código, lo cual es más fácil de ver si agregamos algo de registro al código:

 console.log("Before loading data"); for(const cart_item of cartItems){ getDoc(doc(getFirestore(), 'tickets', cart_item.ticket_id)).then((ticket_item) => { console.log("Got data"); }); } console.log("After starting data load");

Luego ejecuta este código, la salida de registro i:

Antes de cargar datos

Después de iniciar la carga de datos

tengo datos

tengo datos

...

Probablemente esto no sea lo que esperaba inicialmente, pero explica perfectamente por qué su console.log(items) muestra una matriz vacía: en ese momento, ninguna de las llamadas a items.push({...ticket_item.data()}) tiene ejecutar todavía, porque los datos aún se están cargando desde el servidor.


Me di cuenta de que Dharmaraj acaba de publicar una respuesta con el código para una solución funcional usando Promise.all , por lo que también recomiendo revisar eso.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error