En mi aplicación, tengo un componente de Uploader separado basado en react-dropzone, que tiene un método handleFileUpload . Lo reenvío con useEffect como referencia al componente principal y lo activo allí cuando se hace clic en el botón Enviar.

Intenté un enfoque muy básico para cargar varios archivos en S3 con URL prefirmadas mediante Fetch API.

Subidor.js

 const handleFileUpload = async () => { console.log("handleFileUpload begin"); for (const file of files) { let url = await getPresignedUrl(file.name); let response = await fetch(url, { method: "PUT", body: file, }); console.log(response) // <- this is never triggered } }; console.log("handleFileUpload end"); };

En el componente de Form principal, ejecuto este método reenviado de forma asincrónica en el envío del formulario mediante una devolución de llamada de React.

Formulario.js

 const handleSubmit = useCallback( async (e) => { e.preventDefault(); // upload files using ref to the method from Uploader component await handleUpload.current().then( console.log('file uploaded') // update item in database ... ) }, [handleUpload] );

Lo que veo es que todos los registros de la consola se ejecutan en el orden esperado, excepto la llamada de búsqueda real. Entonces, los archivos nunca se cargan cuando presiono el botón Enviar. Quiero estar seguro de que mis archivos terminaron de cargarse en el servidor antes de actualizar las entradas de la base de datos, etc. Debe haber algún problema con mi enfoque, ¿estoy usando las llamadas asincrónicas correctamente?