0

mi consulta es, estoy enviando este formulario del front al backend pero llega vacio. no encuentro el error. Es un formulario para poder crear un nuevo personaje en la Api Debe ser una pavada pero al ser nuevo no lo puedo encontrar y estoy trabado con esto hace dias, por favor el que pueda responder algo claro ya que recien estoy empezando. desde ya, muchas gracias


const Formulario = () => {
    function enviarFormulario (e){
    e.preventDefault();
    const data = new FormData(e.target)
    const newPersonaje={
        Nombre: data.get("Nombre"),
        Historia: data.get("Historia"),
        Imagen: data.get("Imagen"),
        Genero: data.get("Genero"),
        Estado: data.get("Estado"),
        Ocupacion: data.get("Ocupacion"),
    };
    data.append("newPersonaje", JSON.stringify(newPersonaje))
    console.log(newPersonaje);
    fetch(`http://localhost:3000/api/personajes`,{
    method:"POST",
    headers:{
        Accept: "application/json"
    },
    body: data,
    
    })
    .then(res=> console.log(res))
    .catch(err => console.log(err));
    }
    return(
    <div>
        <form  className='contenedor' method="POST" onSubmit={(e)=> enviarFormulario(e)}>
            <label htmlFor="Nombre">Nombre</label>
            <input type="text" id="Nombre" name="Nombre" />
            <label htmlFor="Historia">Historia</label>
            <input type="text" id="Historia" name="Historia" />
            <label htmlFor="Imagen">Imagen</label>
            <input type="text" id="Imagen" name="Imagen" />
            <label htmlFor="Genero">Genero</label>
            <input type="text" id="Genero" name="Genero" />
            <label htmlFor="Estado">Estado</label>
            <input type="text" id="Estado" name="Estado" />
            <label htmlFor="Ocupacion">Ocupacion</label>
            <input type="text" id="Ocupacion" name="Ocupacion" />
            <button type="submit" value="ENVIAR REGISTRO"/>
     
        </form>
    </div>
    )
}

1 respuesta 1

0

amigo!

Respecto a tu problema, veo que todo debe ir bien hasta la línea del Fetch. Es decir, en el console.log del nuevo personaje debes tener los datos del formulario correctamente. El problema se encuentra en las opciones que le das al Fetch:

Cuando utilizas el FormData, la solicitud se envía con un encabezado de Multi-Part de forma predeterminada. Por lo que no es necesario especificarle explícitamente los headers de la solicitud (a menos que lo necesites para enviar otras cosas). Por tanto, debería funcionar correctamente si eliminas el apartado del header en las opciones del Fetch.

Otro cosa a tener en cuenta es que el encabezado que le estas especificando es erróneo pues ese encabezado que pones no tiene un valor de "application-json". Por lo que creo que te referías al encabezado "Content-Type" el cual si tiene dicho valor. Pero como dije antes, cuando usas el FormData, la solicitud va con un encabezado predeterminado de Multi-Part.

Te recomiendo leer la documentación de la API fetch para conocer los encabezados de las solicitudes y respuestas. También, te recomiendo que veas este vídeo que te puede explicar un poco más sobre el FormData.

Por favor, déjame saber si fue útil la respuesta. Un saludo!

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.