React+Axios提交Schema数组问题：存取balance子字段及追加数据

我来帮你理清楚问题所在，一步步解决这个问题：

首先看你的Mongoose Schema，balance是一个数组类型，每个数组元素是包含newBalance和balanceDate的对象。你之前的两种写法都没匹配这个结构，导致数据存不进去或者报错：

1. 先修正前端请求的数据结构 #

你第一个写法把newBalance和balanceDate直接放在了请求体的根层级，但Schema里这两个字段是嵌套在balance数组里的；第二个写法用balance.newBalance作为对象键名，这是JavaScript对象字面量的语法错误，根本跑不起来。

正确的前端请求应该把新的余额对象包裹在balance数组里，同时注意日期不要转成字符串（你的Schema定义的是Date类型，直接传Date对象即可）：

onSubmit = async (e) => {
  e.preventDefault();
  // 直接生成Date对象，不要用toLocaleString转成字符串
  const dayCurrent = new Date();
  await axios.post("/api/submit/submitDebt", {
    // 匹配Schema的结构：balance是数组，每个元素是包含两个字段的对象
    balance: [{
      newBalance: this.state.balance,
      balanceDate: dayCurrent
    }]
  });
  this.props.history.push('/dashboard');
}

2. 实现追加而非替换原有数据 #

如果直接用上面的请求+普通的create/update，会把原来的balance数组整个替换掉。要实现追加，需要在后端用MongoDB的$push操作符，它会把新元素添加到数组末尾，而不是覆盖整个数组。

假设你的后端是Node.js + Mongoose，路由处理代码应该改成这样：

// 后端示例代码
router.post('/submitDebt', async (req, res) => {
  try {
    // 场景1：创建新的债务文档
    const newDebt = await SubmitDebt.create({
      balance: req.body.balance // 这里是包含新元素的数组
    });

    // 场景2：给已有的债务文档追加余额（比如根据ID找到文档）
    // const updatedDebt = await SubmitDebt.findOneAndUpdate(
    //   { _id: req.body.debtId }, // 假设你传递了目标文档的ID
    //   { $push: { balance: req.body.balance[0] } }, // 用$push追加单个元素
    //   { new: true } // 返回更新后的文档
    // );

    res.status(200).json(newDebt);
  } catch (err) {
    res.status(500).json(err);
  }
});

额外注意点 #

• 不要用toLocaleString()处理日期：这个方法会把Date对象转成本地化字符串，而你的Schema定义的是Date类型，直接传new Date()生成的对象，Mongoose会自动把它转换成MongoDB支持的Date格式。
• 如果是追加到已有文档，必须用$push操作符：这是MongoDB专门用于数组追加的操作符，用它才能保证原有数组元素不被覆盖。

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