React动态表单提交数组对象至Node.js，Mongoose存库失败求助

我帮你梳理下问题的核心原因，然后一步步给出解决方案：

问题根源 #

你遇到的核心问题是数据序列化方式和后端解析不匹配：

• 用querystring.stringify处理嵌套数组时，会把复杂的对象结构转成application/x-www-form-urlencoded格式的字符串，这种格式天生不适合传递嵌套层级深的数据，后端拿到的不是预期的数组对象，而是被错误序列化后的内容，导致存入数据库时变成[{""}]。
• 虽然你后来修正了Mongoose Schema，但提交方式的问题没解决，所以还是无法正确存储。

分步解决方案 #

1. 修正Axios提交逻辑（前端） #

放弃querystring.stringify，直接传递JSON格式的数据，同时设置正确的请求头：

handleSubmit(e) {
  e.preventDefault(); // 务必阻止表单默认提交行为，避免页面刷新
  axios.post('receivedata', { formdata: this.state.formdata }, {
    headers: { "Content-Type": "application/json" }
  })
  .then(response => {
    console.log('提交成功:', response);
  })
  .catch(error => {
    console.error('提交失败:', error);
  });
}

2. 确保Express能解析JSON请求体（后端） #

在你的Express主文件（比如app.js或server.js）中添加JSON解析中间件，否则后端无法正确解析请求体中的JSON数据：

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

// 关键：添加JSON解析中间件
app.use(express.json());

// 挂载你的路由（根据实际路径调整）
app.use('/receivedata', require('./routes/entryRouter'));

3. 确认Mongoose Schema与数据结构匹配 #

你后来修改的Schema是正确的，确保它和前端传递的formdata数组结构完全对应：

const mongoose = require('mongoose');

var EntrySchema = new mongoose.Schema({
  formdata: [{
    author: String,
    age: Number,
    books: Number
  }],
  updated_at: { type: Date, default: Date.now }
});

// 务必创建模型后再导出
module.exports = mongoose.model('Entry', EntrySchema);

4. 修正后端保存逻辑 #

确保你正确创建了Entry模型实例，并且处理错误的方式更严谨：

const Entry = require('../models/Entry'); // 导入模型

router.post("/", function(req, res) {
  // 先打印req.body，确认后端拿到的数据是正确的
  console.log('收到的表单数据:', req.body.formdata);
  
  const newEntry = new Entry({
    formdata: req.body.formdata
  });

  newEntry.save(function(err) {
    if (err) {
      // 返回500状态码表示服务器错误，同时传递错误信息
      return res.status(500).send({ error: '保存失败', details: err });
    }
    res.send("Entry added successfully!");
  });
});

测试验证 #

1. 前端提交前，确认this.state.formdata是正确的嵌套数组；
2. 后端在router.post中打印req.body.formdata，看是否和前端传递的结构一致；
3. 保存后查看MongoDB数据库，确认formdata字段正确存储了数组对象。

内容的提问来源于stack exchange，提问作者A.S.J