如何将React表单数据发送到后端express服务器

import React, { useState } from 'react';

const FormComponent = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleSubmit = () => {
    const formData = {
      name: name,
      email: email
    };

    fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
      .then(response => response.json())
      .then(data => {
        // 处理服务器的响应数据
      })
      .catch(error => {
        // 处理错误
      });
  };

  return (
    <form>
      <label>Name:</label>
      <input type="text" value={name} onChange={handleNameChange} />
      <br />
      <label>Email:</label>
      <input type="text" value={email} onChange={handleEmailChange} />
      <br />
      <button onClick={handleSubmit}>Submit</button>
    </form>
  );
};

export default FormComponent;

const express = require('express');
const app = express();

app.use(express.json());

app.post('/api/submit', (req, res) => {
  const formData = req.body;

  // 执行后端逻辑，例如保存表单数据到数据库

  res.json({ message: 'Form data received successfully.' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});