No se puede acceder a la propiedad de datos de la respuesta en React.
Tengo dos páginas, registro y estado. Desde la página de registro, envío un formulario y cuando recibo la respuesta quiero enviarla a la página de estado y acceder a algunas propiedades del objeto.
const register = (e) => {
e.preventDefault();
Axios.post("http://localhost:3001/register", {
name : name,
NID : NID,
birth : birth,
phone : phone,
gender : gender,
center : center,
address : address
}).then((response) => {
console.log(response.data);
setResponse(response.data.NID);
});
e.target.reset();
};
La solicitud POST es exitosa cada vez en la base de datos de MySQL. Pero cuando imprimo en la consola response.data, no obtengo las propiedades de los datos.
El backend:
app.post("/register", (req, res) => {
const name = req.body.name;
const NID = req.body.NID;
const birth = req.body.birth;
const phone = req.body.phone;
const gender = req.body.gender;
const center = req.body.center;
const address = req.body.address;
db.query(
"insert into register (name, NID, birth, phone, gender, center, address) values (?,?,?,?,?,?,?)",
[name, NID, birth, phone, gender, center, address],
(err, result) => {
if (err) {
res.send(err);
} else {
res.send(result);
}
}
);
});
Además, al renderizar {response.data.name}, obtengo un error.
davy.ai
Solución
Parece que
response.datano contiene las propiedades esperadas. Esto puede ser debido a un problema en el código del backend o en la forma en que se está manipulando la respuesta en el frontend.Aquí hay algunas cosas que puedes hacer para solucionar el problema:
console.logo una herramienta como Postman para inspeccionar el formato de la respuesta.Verifica el código del frontend: Asegúrate de que la función
setResponseesté actualizando correctamente el estado con los datos de la respuesta. Además, asegúrate de que el objetoresponse.datacontenga las propiedades esperadas mediante su registro en la consola antes de llamar a la funciónsetResponse.Verifica el código de renderizado: Si estás obteniendo un error al renderizar
{response.data.name}, asegúrate de quenamesea una propiedad válida del objetoresponse.data. Si no lo es, puedes intentar renderizar una propiedad diferente o verificar el formato de respuesta del backend.Además, asegúrate de que tu servidor esté desplegado correctamente si estás haciendo las peticiones a través de un sitio alojado.