React+Node实现数据存入MongoDB时db未定义如何解决

你现有代码存在4个直接导致写入失败的问题：

• 前端POST请求未对JS对象做JSON序列化，传输到后端的是无效格式数据
• 后端未配置express.json()中间件，无法解析JSON类型的请求体
• 数据库连接方法未导出连接实例，代码中调用的db变量从未被定义
• 重复引入request模块、存在未定义的find_my_iphone方法调用，会直接触发运行时报错

前端React提交方法修改 #

将请求体用JSON.stringify()序列化后再传输：

handleSubmit = () => {
  console.log("its running");
  const databody = {
    message: this.state.val,
  };
  return fetch("http://localhost:5000/stored", {
    method: "POST",
    body: JSON.stringify(databody),
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((res) => res.json())
    .then((data) => console.log(data));
};

数据库连接文件修改（config/db.js） #

导出Mongoose连接实例，方便后续引用：

const mongoose = require("mongoose");

const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGO_URI, {
      useUnifiedTopology: true,
      useNewUrlParser: true,
    });
    console.log(`MongoDB Connected : ${conn.connection.host}`);
    return conn;
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};
module.exports = connectDB;

新增数据模型（models/Quote.js） #

用Mongoose定义quotes集合对应的数据结构，比直接操作原生collection更稳定：

const mongoose = require('mongoose');
const QuoteSchema = new mongoose.Schema({
  message: {
    type: String,
    required: true
  }
}, { timestamps: true });
module.exports = mongoose.model('Quote', QuoteSchema, 'quotes');

后端服务入口修改（index.js） #

清理冗余代码，添加JSON解析中间件，等数据库连接完成后再启动服务，用模型完成数据写入：

const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");
const port = 5000;
const Quote = require("./models/Quote");
const connectDB = require("./config/db");
dotenv.config({ path: "./config/config.env" });

const app = express();
// 解析JSON请求体
app.use(express.json());
app.use(cors({ origin: "*" }));

app.get("/", (req, res) => {
  res.send("Hey there!");
});

app.post("/stored", async (req, res) => {
  try {
    const savedDoc = await Quote.create(req.body);
    res.json({ success: true, data: savedDoc });
  } catch (err) {
    console.log(err);
    res.status(500).json({ success: false, error: err.message });
  }
});

// 数据库连接成功后再启动端口监听
connectDB().then(() => {
  app.listen(port, () => console.log(`Service running on port ${port}!`));
});

原代码中重复引入request模块、未定义就调用find_my_iphone的冗余代码全部删除即可，没有实际作用还会触发报错。

1. 确认本地MongoDB服务处于运行状态，config.env文件内的MONGO_URI配置正确
2. 重启后端Node服务，控制台输出MongoDB连接成功日志后，再启动前端服务
3. 前端输入内容点击提交，即可在MongoDB的quotes集合中看到对应存储的数据

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