0

Tengo el siguiente formulario como componente de React:

<form className="d-block w-100 p-4 rounded" onSubmit={handleSubmit}>
      <span className="d-block text-center mb-3">Nuevo libro</span>
      <div className="mb-3 border-1">
        <label htmlFor="input" className="form-label">Titulo del libro:</label>
        <input name='titulo' type="text" className="form-control" id="titulo" onChange={handleChange}/>
      </div>
      <div className="mb-3">
        <label htmlFor="input" className="form-label">Precio:</label>
        <input name='precio' type="number" className="form-control" id="precio" onChange={handleChange}/>
      </div>
      <button type="submit" className="btn btn-primary">Enviar</button>
</form>

que maneja el envio con la siguiente función handleSubmit:

const handleSubmit = () => {
      fetch('http://localhost:9000/api/'+ props.libro.id, {
        method: 'PUT',
        headers: {'Contentent-Type': 'application/json'},
        body: JSON.stringify(form)
      });
    }

El id del libro viene dado porque se envia como prop al componente del formulario

form es una variable de estado que actualiza los datos:

const [form, setForm] = useState({});
  const handleChange = e => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  }

Del lado del servidor utilizo express, y la ruta a donde llega la petición es la siguiente:

routes.put('/:id', (req, res) => {
    const id = req.params.id;
    console.log(req.body);
    req.getConnection((err, conn) => {
        if(err) return res.send(err)
        conn.query('UPDATE libros SET ? WHERE id = ?', [req.body, id], (err, rows) => {
            if(err) return res.send(err);
            res.send(res.body);
        })
    });
});

El console.log(req.body) muestra {} siendo que desde el cliente no se envió el objeto vacío

utilizo los siguientes Middlewares:

 app.use(myconn(mysql, dbOptions, 'single'));
 app.use(cors());
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));

Quisiera saber a qué se debe esta pérdida de la información y cómo podría solucionarlo. Estoy atento a cualquier consulta.

2 respuestas 2

1

En los headers del fetch, estas escribiendo 'Contentent-Type', repitiendo tent, cambialo a 'Content-Type', quizá de esta manera funciona.

0

Hace buen tiempo que no toco React, pero entendería que para enlazar el estado con tus inputs, necesitas usar dos atributos

1.- value 2.- onChange

Creo que en este caso solo faltaría agregar la propiedad value

<form className="d-block w-100 p-4 rounded" onSubmit={handleSubmit}>
      <span className="d-block text-center mb-3">Nuevo libro</span>
      <div className="mb-3 border-1">
        <label htmlFor="input" className="form-label">Titulo del libro:</label>
        <input name='titulo' value={form.titulo} type="text" className="form-control" id="titulo" onChange={handleChange}/>
      </div>
      <div className="mb-3">
        <label htmlFor="input" className="form-label">Precio:</label>
        <input name='precio' value={form.precio} type="number" className="form-control" id="precio" onChange={handleChange}/>
      </div>
      <button type="submit" className="btn btn-primary">Enviar</button>
</form>

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.