0
155
VistasAsync await no funciona como se esperaba
Estoy tratando de configurar las imágenes después de subirlas a la nube, pero parece que me falta algo. La salida no es la deseada.
Espero que la salida tenga todas las imágenes. Pero es solo 0 en su lugar.
useEffect(() => { console.log("============ From UseEffect ==========") console.log("Images now Contain : ", images); }, [images]); const uploadFilesToCloud = async () => { const data = new FormData(); for (let i = 0; i < imageUrls.length; i++) { const finalImage = await getBase64FromUrl(imageUrls[i]); data.append("file", finalImage); data.append("upload_preset", "myPreset"); const res = await fetch( "https://api.cloudinary.com/v1_1/dpurb6xes/image/upload", { method: "Post", body: data, } ); const response = await res.json(); setImages((old) => [...old, response.secure_url]); } }; const onClick = async (e) => { await uploadFilesToCloud(); const myForm = { name: name, imageUrls: images, }; console.log("form data is ", myForm); }Sorprendentemente, la salida es:
Mi pregunta actual es ahora.
- Aunque las imágenes tienen un elemento antes de configurar myForm.imgUrls = imágenes. Incluso entonces myForm.imageUrls no tiene ningún elemento. Cómo ?
- Y lo que quiero es que, después de configurar ambas imágenes recibidas, el formulario debe inicializarse con imágenes.
¿Puedes decir cómo hacer exactamente eso?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
No creo que haya realmente una necesidad de estado aquí. Asigne la matriz imageUrls a una matriz de fetch Promises y devuelva Promise.all from upload . El controlador onClick puede await la matriz de Promesas para resolver y usar la matriz de URL de imágenes resueltas.
Ejemplo:
const App = () => { const upload = () => { const imgURLs = imageUrls.map(data => { return fetch( "https://api.cloudinary.com/v1_1/dpurb6xes/image/upload", { method: "Post", body: data, } ).then(response => response.json()) .then(response => response.secure_url); }); return Promise.all(imgURLs); }; const onClick = async () => { const imageURLs = await upload(); const myForm = { formImages: imageURLs, }; console.log("Form details", myForm); }; return ( <> <div className="container"> <button type="button" onClick={onClick} > Click me </button> </div> </> ); }; Si necesita almacenar las URL de las imágenes en el estado, el lugar para hacerlo es en el controlador onClick una vez que todo se resuelva.
Ejemplo:
const onClick = async () => { const imageURLs = await upload(); const myForm = { formImages: imageURLs, }; console.log("Form details", myForm); setimages(imageURLs); };
·
Juan Pablo Isaza
Denunciar
Responde la pregunta