Soy nuevo en Reactjs. Creé una aplicación para cargar varios archivos en aws s3. Estoy usando un bucle para cargar todos los archivos. También necesito obtener una respuesta del archivo cargado como el nombre del archivo. Esto es lo que tengo hasta ahora:
const handleClick = async (event) => { event.preventDefault(); let newArr = fileInput.current.files; for (let i = 0; i < newArr.length; i++) { const file = newArr[i] let newFileName = file.name.replace(/\..+$/, ""); const ReactS3Client = new S3(config); ReactS3Client.uploadFile(file, newFileName).then((data) => { if (data.status === 204) { console.log( data.key); } else { console.log("fail"); } }); } };Después de buscar mucho en Google, agregué async a mi handleclick. Estoy súper confundido. ¿Alguien puede decirme cómo esperar a que termine el ciclo? ¿O simplemente esperar a que handClick se ejecute por completo? Mi clave también se muestra indefinida si trato de imprimirla. Solo puedo obtener una respuesta en .luego en handleUpload. Pero necesito esperar todas las claves antes de poder hacer otra llamada a la API y cambiar de página. Cualquier ayuda es apreciada.
En primer lugar, lo estás haciendo de forma incorrecta. ReactS3Client (en su caso) debe inicializarse una vez.
Y sobre la pregunta que hiciste. Puedes usar Promise.all().
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Úsalo así.
// Import from other file like config const ReactS3Client = new S3(config); const handleClick = async (event) => { event.preventDefault(); try { const newArr = fileInput.current.files; const v = await Promise.all( newArr.map(async (file) => { let newFileName = file.name.replace(/\..+$/, ""); // assuming key is there in response const { key } = await ReactS3Client.uploadFile(file, newFileName); return { newFileName, fileKey: key, }; }) ); console.log(v); } catch (e) { console.error(e); } };