2

Estoy realizando un formulario en React que será utilizado para hacer un POST a una API, lo que ocurre es que al momento de hacer el envío del formulario, el primer click retorna un array vacío, pero al clickear nuevamente la api responde correctamente.

(En el código que adjunté eliminé bastantes input para que no se vea tanto código)

 const [response, setResponse] = useState({});

  const { register, handleSubmit} = useForm();

  const onSubmit = (data) => {
    submit(data);
  }

  const submit = (data) => {
    console.log("Request Body: ", data);
    axios.post('http://xxxxxxxx:5003/FamiliaNo', data).then(res => setResponse(res.data));
    console.log("Response: ", response.data);


    const link = document.createElement('a');
    link.href = 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,' + response.base64;
    link.download = response.nombreArchivo + ".docx";
    link.click();
  }


  return (
    <div className="App">
      <header className="App-header">
        <img src={'https://www.imagen.io/portal/bootstrap/img/logo-grande.svg'} style={{height:150}} alt="logo" />
        <p>
          Generador documento FAMILIA NO
        </p>
        <form onSubmit={handleSubmit(onSubmit)}>
        <div className="col-md-3">
                    <input type="text" placeholder="Caratula" className="form-control" name="caratula" {...register("caratula")}></input>
        </div>

          <input  type="submit" name="Enviar" />
        </form>

       
      
      </header>
    </div>
  );

introducir la descripción de la imagen aquí

Luego de hacer el segundo click, ya responde perfecto.

introducir la descripción de la imagen aquí

2

1 respuesta 1

2

Tu problema está en que axios.post es código asincrónico, y no se ejecuta inmediatamente, por lo tanto, la ejecución del programa seguirá sin que se tengan los datos de la petición, es por eso que ves que tu respuesta está vacía. axios.post te responde con una promesa, y solo cuando se resuelva es que tendrás tus datos listos.

Tu programa no es que esté funcionando con el segundo click, es que para cuando das el segundo click ya los datos del primer click se obtuvieron. Y así sucesivamente.

Para que todo funcione como quieres, tienes dos opciones, usar async-await o encerrar todo en el then.

Encerrando todo en una promesa quedaría:

const submit = (data) => {
    console.log("Request Body: ", data);
    axios.post('http://xxxxxxxx:5003/FamiliaNo', data).then(res =>
    {setResponse(res.data)
    console.log("Response: ", response.data);
    const link = document.createElement('a');
    link.href = 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,' + response.base64;
    link.download = response.nombreArchivo + ".docx";
    link.click()
    })
  }
1
  • Muchísimas gracias Jaime por tu tiempo y explicación. Mí código quedó funcionando perfecto, saludos. Commented el 11 oct. 2021 a las 19:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.