Estoy tratando de cargar varias imágenes en Firebase y obtener las URL de cada imagen y enviarlas a la base de datos mediante llamadas api (con redux) . Estoy tratando de implementarlo usando Promise.all() pero las direcciones URL se obtienen de forma asíncrona y la llamada Promise.all() se ejecuta antes de que se actualice el estado de la matriz. Aquí está el código que podría ayudarlo a comprender mejor.
.......... const [imgs,setImgs] = useState([]) const [urls,setUrls] = useState([]); .......... //Code for setImg that will add all the files that are been selected! .......... const uploadImages = async () => { const promises = []; imgs.map((image) => { const imageRef = ref(storage, `Drives/${image.name + v4()}`); const uploadTask = uploadBytesResumable(imageRef, image); promises.push(uploadTask); uploadTask.on( "state_changed", (snapshot) => { const progress = Math.round( (snapshot.bytesTransferred / snapshot.totalBytes) * 100 ); // dispatch(fetchStart()); }, (error) => { alert(error); }, () => { getDownloadURL(uploadTask.snapshot.ref).then((url) => { console.log(url); // this is been shown after the promise.all is executed!! setUrls((oldArray) => [...oldArray, url]); // This is not getting updated as expexted!! }); } ); }); Promise.all(promises) // Being executed before the urls state is updated hence is submitting a empty array!! .then(() => { toast.success("All images uploaded"); const FormatDate = moment(data.date).format("DD/MM/YYYY"); const { __v, ...rest } = data; if (urls.length === 0) { toast.error("Urls were not Pushed!!"); console.log(urls); dispatch(clearState()); return 0; } const formData = { ...rest, date: FormatDate, driveImages: [...urls] ,// Or urls ---- This is showing empty.. But after some time urls is being updated!! flags: { isUploadImage: true, }, }; dispatch(updateDrives(formData)); }) .catch((err) => toast.error(err)); };He mencionado comentarios apropiados en el código para una mejor comprensión.
Las versiones de firebase que estoy usando son "firebase": "^9.7.0" .
Por lo que entendí, hay algunos puntos clave para verificar en su código:
¿Ha puesto la función uploadImages() en un useEffect con una dependencia de imgs para asegurarse de que imgs no esté vacío y se llamará a la función cuando se actualicen imgs?
useEffect(()=>{uploadImages()},[imgs]); Cuando se trata de promesas, tenga en cuenta que existen dos enfoques generales: usar async/await o then()/catch() . Utilice un enfoque. Si está utilizando async , debe usar await antes de llamar a las funciones que devuelven una promesa.
La función map () en js siempre debe devolver un resultado en cada iteración. Si no devuelve nada, todo lo que obtiene es una matriz con valores indefinidos sin importar lo que haya hecho en cada iteración.
const promiseArray = imgs.map(async () => { try{ const uploadTask = await uploadBytesResumable(imageRef, image); ... return uploadTask; } catch(err){ // handle err }; }); const result = await Promise.all(promiseArray); Si no desea devolver un valor, use forEach() en su lugar.