0

tengo un problema haciendo un POST a una API creada en Strapi y estoy usando React vite. el error que sale es que al hacer el submit, en consola me sale POST http://... 400 (Bad Request) y en consola de strapi me sale Unexpected token o in JSON at position 1.

El error que arroja Strapi es: introducir la descripción de la imagen aquí

Adjunto codigos.

Etiqueta Form mandando por un input de tipo submit los datos.

<div className="bg-white shadow rounded-md md:w-4/4 mx-auto px-5 py-10 mt-5">
    {errores?.length &&
      errores.map((error, i) => <Error key={i}>{error}</Error>)}

    <Form method="post" encType="multipart/form-data">
      <FormularioCapacitacion />
      <input
        type="submit"
        className="mt-5 w-full bg-green-800 p-3 uppercase font-bold text-white text-lg"
        value="Registrar Capacitación"
      />
    </Form>
  </div>

Funcion Action para validar e enviar informacion al servidor.

export async function action({ request }) {
const formData = await request.formData();

  const data = Object.fromEntries(formData);

  console.log(data);

  //Validación
  const errores = [];
  if (Object.values(data).includes("")) {
    errores.push("Todos los campos son obligatorios");
  }

  //Retornar datos si hay errores
  if (Object.keys(errores).length) {
    return errores;
  }

 await agregarCapacitaciones(data); 

  return redirect("/capacitaciones");
}

y por ultimo el codigo sel servicio que envia a la api los datos.

export async function agregarCapacitaciones(datos){
console.log(datos);
try {
    const respuesta = await fetch(import.meta.env.VITE_API_STRAPI_CONTENIDOS_URL, {
        method: 'POST',
        body: JSON.stringify({'data':datos}),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    await respuesta.json()
    
} catch (error) {
    console.log(error);
}
}

Lo que se envia a la funcion agregarCapacitacion como valor datos es:

introducir la descripción de la imagen aquí

4
  • Mi pregunta es: Cuando envías los datos dentro de agregarCapacitaciones, ¿La respuesta que obtienes de tu api es un json? Lo más probable es que la respuesta no sea un json válido y cuando ejecutas la línea respuesta.json() tu código explota. Asegúrate por favor de que respuesta contenga una respuesta en formato json válido. De hecho, elimina la línea await respuesta.json() y verifica si se elimina el error, al final no haces nada con la respuesta por lo que veo.
    – Jaime
    Commented el 12 dic. 2022 a las 21:12
  • Ya se lo quite y sigue saliendo el error, lo que llega a la funcion de agregarCapacitaciones como datos es: {semana: '1', dia: '3', rango: 'senior', titulo: 'gsgs', descripcion: 'sgsg', …} Commented el 12 dic. 2022 a las 21:42
  • ahi edite la pregunta con mas detalle Commented el 12 dic. 2022 a las 21:44
  • Revisa esta respuesta de stackoverflow en inglés Espero que te sirva... Commented el 12 dic. 2022 a las 22:48

1 respuesta 1

0

Ya encontre la solucion:

En la funcion Action para validar e enviar informacion al servidor, cree una nueva variable donde encerraba la data en un objeto y listo.

export async function action({ request }) {
const formData = await request.formData();

const data = Object.fromEntries(formData);

const dataFinal = {data}
console.log(dataFinal);

y en el fetch del server lo deje solo con Stringify(datos)

export async function agregarCapacitaciones(datos){
console.log(datos);
try {
    const respuesta = await 
fetch(import.meta.env.VITE_API_STRAPI_CONTENIDOS_URL, {
        method: 'POST',
        body: JSON.stringify(datos),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    
} catch (error) {
    console.log(error);
}
}

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.