问题 51115640: 如何从React发送表单数据到Express？

我正在尝试从React前端发送表单数据到Express后端。我已经设法在React中收集表单数据并尝试将其发送到Express服务器。但是，我无法在我的Express路由中获取表单数据。这是我的代码：

React组件代码

import React, { Component } from 'react';
import axios from 'axios';

class MyForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      email: '',
      message: '',
    };
  }

  handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    const { name, email, message } = this.state;

    axios.post('http://localhost:8000/form', { name, email, message })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleInputChange}
          />
        </label>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={this.state.email}
            onChange={this.handleInputChange}
          />
        </label>
        <label>
          Message:
          <textarea
            name="message"
            value={this.state.message}
            onChange={this.handleInputChange}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default MyForm;

Express路由代码

const express = require('express');
const router = express.Router();

router.post('/form', (req, res) => {
  console.log(req.body);
  res.send('Form received!');
});

module.exports = router;

我使用了body-parser中间件来解析请求正文，但是我仍然无法获取表单数据。

我该如何在Express路由中获取React发送的表单数据？

回答 51116082

您需要在Express应用程序中使用body-parser中间件来解析请求正文。但是，您需要确保body-parser中间件是作为Express应用程序的第一个中间件。

const express = require('express');
const bodyParser = require('body-parser');
const router = express.Router();

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

router.post('/form', (req, res) => {
  console.log(req.body);
  res.send('Form received!');
});

app.use('/', router);

app.listen(8000, () => {
  console.log('Server started on port 8000');
});

在上面的代码中，我们首先导入Express和body-parser模块。然后将body-parser中间件添加到应用程序中，并将其作为第一个中间件添加。接下来，我们定义路由，并在路由中打印请求正文。最后，我们将路由作为根中间件添加到应用程序中，并在端口8000上启动服务器。

现在，您应该能够成功获取从React发送的表单数据。