将状态对象作为POST主体发送并在Express服务器中按未定义的方式接收它

Question

[我正在尝试使用我的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）正在打印未定义。

Answer 1

您需要绑定handleSubmit方法以访问正确的this，并随后在其中声明状态

constructor(props) {
  super(props);
  this.state = {
    titulo: ''
  }

  this.handleTitulo = this.handleTitulo.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}