form提交对象数组后Node.js后端req.body取值为[object Object]如何解决

问题根源 #

浏览器提交表单时，会自动将非字符串类型的input值调用toString()方法转为字符串，对象数组执行toString()的结果就是[object Object]，所以后端接收到的本来就是这个无效字符串，后续操作自然会返回undefined。

解决方案 #

1. 前端修改：提交前先序列化对象数组

将隐藏input的绑定值改为序列化后的JSON字符串，代码修改如下：

<form action="http://localhost:4000/user/looseAllPendingBets" method="post">
        <input type="hidden" :value="JSON.stringify(selected)" name="arrayToDelete">
        <button type="submit" class="btn btn-outline-danger">All selected = Lost</button>
</form>

2. 后端修改：反序列化拿到原始对象数组

后端接收到arrayToDelete字段后，不要执行JSON.stringify，而是用JSON.parse将JSON字符串转回对象数组：

exports.looseAllPendingBets = (req, res) => {
    // 先反序列化拿到原始对象数组
    let array = JSON.parse(req.body.arrayToDelete)
    console.log(array)
    // 此时可以正常访问 array[0].id 等值
};

额外校验

确认你的Express服务已经配置了表单解析中间件，否则req.body会为空：

// 一般在app.js/入口文件添加这行配置
app.use(express.urlencoded({ extended: true }))

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