React应用连接MongoDB：如何将表单JSON数据存入MongoDB集群

Hey there! Let's break down how to get your React form data into MongoDB step by step—since React is a frontend framework, you can't connect directly to MongoDB from it, so we'll need a simple Node.js backend to handle the database interaction. Here's exactly what to do:

First, we'll create a separate backend project to act as the middleman between your React app and MongoDB:

• Create a new folder (e.g., backend) and navigate into it
• Run these commands to initialize the project and install dependencies:

npm init -y
npm install express mongoose cors

• express: Lightweight web framework to build API endpoints
• mongoose: MongoDB object modeling tool to simplify database interactions
• cors: Fixes cross-origin errors when your React app calls the backend

Create a server.js file in your backend folder with this code to establish the database connection:

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

const app = express();

// Enable CORS and parse JSON requests
app.use(cors());
app.use(express.json());

// Connect to your MongoDB Atlas cluster
const mongoURI = 'mongodb+srv://matt:passwprd@cluster0-jlasm.mongodb.net/test';
mongoose.connect(mongoURI)
  .then(() => console.log('Connected to MongoDB successfully!'))
  .catch(err => console.error('MongoDB connection error:', err));

// Start the server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

⚠️ Quick note: Make sure your MongoDB Atlas cluster allows your local IP address (check the "Network Access" tab in your Atlas dashboard—you can temporarily add 0.0.0.0/0 for development to avoid IP restrictions).

Create a models/FormData.js file to define the structure of your form data (adjust fields to match your actual form):

const mongoose = require('mongoose');

const formDataSchema = new mongoose.Schema({
  // Example fields—replace with your form's actual inputs
  fullName: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true,
    match: [/^\S+@\S+\.\S+$/, 'Please enter a valid email']
  },
  message: {
    type: String,
    required: true
  }
});

module.exports = mongoose.model('FormData', formDataSchema);

Update your server.js to add a POST endpoint that saves form data to MongoDB:

const FormData = require('./models/FormData');

// Handle form submission requests
app.post('/api/submit-form', async (req, res) => {
  try {
    // Create a new document from the incoming form data
    const newSubmission = new FormData(req.body);
    // Save it to the database
    await newSubmission.save();
    res.status(201).json({ message: 'Form data saved successfully!' });
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

Modify your React form component to send data to the backend API instead of just validating it. Here's an example (adjust fields to match your form):

import { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    message: ''
  });
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    try {
      const response = await fetch('http://localhost:5000/api/submit-form', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error);
      }

      const result = await response.json();
      setSuccess(result.message);
      // Reset form after successful submission
      setFormData({ fullName: '', email: '', message: '' });
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="container mt-4">
      {error && <div className="alert alert-danger">{error}</div>}
      {success && <div className="alert alert-success">{success}</div>}

      <div className="mb-3">
        <label className="form-label">Full Name</label>
        <input
          type="text"
          className="form-control"
          name="fullName"
          value={formData.fullName}
          onChange={handleInputChange}
          required
        />
      </div>

      <div className="mb-3">
        <label className="form-label">Email</label>
        <input
          type="email"
          className="form-control"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          required
        />
      </div>

      <div className="mb-3">
        <label className="form-label">Message</label>
        <textarea
          className="form-control"
          name="message"
          value={formData.message}
          onChange={handleInputChange}
          required
        />
      </div>

      <button type="submit" className="btn btn-primary">Submit</button>
    </form>
  );
}

export default ContactForm;

1. Start the backend: In your backend folder, run node server.js
2. Start your React app: In your React project folder, run npm start
3. Fill out your form and submit—your data should now show up in your MongoDB Atlas cluster!

Pro Tip for Development #

Never hardcode your MongoDB password in plain text. Install the dotenv package (npm install dotenv), create a .env file in your backend folder, and store your connection string there:

MONGO_URI=mongodb+srv://matt:passwprd@cluster0-jlasm.mongodb.net/test

Then update your server.js to load the environment variable:

require('dotenv').config();
mongoose.connect(process.env.MONGO_URI)

内容的提问来源于stack exchange，提问作者Mateusz Osuch