将状态对象作为POST主体发送并在Express服务器中按未定义的方式接收它
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将状态对象作为POST主体发送并在Express服务器中按未定义的方式接收它相关的知识,希望对你有一定的参考价值。
[我正在尝试使用我的React表单组件发出POST请求,以将State对象作为主体发送,但是我收到的主体为Undefined。
我的表单组件将状态信息传递给我作为道具制作的另一个React组件(一个Bootstrap输入)。
我将信息保持在家长的状态(在这里我也进行POST),所以这应该不是问题。
我的表单组件:
class AgregarReservaForm extends Component
constructor(props)
super(props);
this.state =
titulo: ''
this.handleTitulo = this.handleTitulo.bind(this);
handleTitulo(event)
this.setState(titulo: event.target.value)
async handleSubmit(event)
event.preventDefault();
let self = this;
let response = await fetch('http://localhost:3001/reserva',
method: 'POST',
body: JSON.stringify(self.state),
headers:
'Content-Type': 'application/json; charset=utf-8'
,
mode: 'no-cors'
);
if(!response.ok)
throw new Error();
render()
return (
<form onSubmit=this.handleSubmit>
<InputText
name="titulo"
value=this.state.titulo
onChange=this.handleTitulo
/>
</form>
我的Express POST路线:
app.post('/reserva', (req, res) =>
let body = req.body;
console.log(body);
let nuevaReserva = new Reserva(
titulo: body.titulo
);
nuevaReserva.save((err, reservaDB) =>
if (err)
return res.status(500).json(
ok: false,
err
);
res.json(
ok: true,
reservaDB
);
);
);
Consoloe.log(body)正在打印未定义。
答案
您需要绑定handleSubmit方法以访问正确的this
,并随后在其中声明状态
constructor(props)
super(props);
this.state =
titulo: ''
this.handleTitulo = this.handleTitulo.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
以上是关于将状态对象作为POST主体发送并在Express服务器中按未定义的方式接收它的主要内容,如果未能解决你的问题,请参考以下文章
Node.js/ Express POST 请求正文被解析为不正确的 JSON