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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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