表单元素不会使用axios将所有数据发送到mongoDB。(React，Axios，Express)

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

const FormComponent = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('/api/submit-form', formData)
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={handleChange} />
      <input type="email" name="email" value={formData.email} onChange={handleChange} />
      <textarea name="message" value={formData.message} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormComponent;

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

const app = express();
app.use(express.json());

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch(error => {
    console.error('Failed to connect to MongoDB', error);
  });

// 定义数据模型
const FormSchema = new mongoose.Schema({
  name: String,
  email: String,
  message: String
});

const FormModel = mongoose.model('Form', FormSchema);

// 处理POST请求
app.post('/api/submit-form', (req, res) => {
  const formData = req.body;

  // 创建新的表单实例
  const form = new FormModel(formData);

  // 保存表单数据到数据库
  form.save()
    .then(() => {
      res.send('Form submitted successfully');
    })
    .catch(error => {
      console.error('Failed to submit form', error);
      res.status(500).send('Failed to submit form');
    });
});

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