将状态对象作为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

在Express中作为POST请求的结果呈现视图

Node JS POST请求返回未定义的主体

通过 Node Express 将对象作为字符串而不是 JSON 发送

使用Map飞镖HTTP POST 作为身体

将对象转换为 TypeScript 中的接口