如何使用Sequelize bulkCreate插入多行不同值数据并解决NaN异常

问题根因 #

1. 表单提交逻辑问题：你当前所有表单行的输入/下拉框都用了相同的name属性，提交后同名字段会被合并为数组传到后端，比如project_id实际是包含所有行项目ID的数组。你在bulkCreate里硬写了4个相同的对象，每个对象直接把数组赋值给字段，就导致每行的字段都存了全量数组值，同时插入了4行重复数据。
2. NaN问题：cost和hours字段后端收到的是字符串数组，直接传给REAL类型的数据库字段时，类型转换失败就会生成NaN。

解决步骤 #

1. 修改前端HTML表单的字段命名

把所有输入、下拉框的name属性加上[]后缀，让后端可以按行索引匹配对应字段：

<!-- 所有字段都按这个格式修改 -->
<input name="project_id[]" type="text" class="form-control">
<select name="imp_or_ann[]" class="form-select">
<select name="category[]" class="form-select">
<input name="cost[]" type="text" class="form-control">
<input name="hours[]" type="text" class="form-control">

新增行的JS逻辑也要保持新行的字段name带[]后缀。

2. 改写后端Controller逻辑

先拿到所有字段数组，遍历组装成符合要求的对象数组，同时把数值类型字段转成Number：

const { project_id, imp_or_ann, category, cost, hours } = req.body;

try {
    // 校验所有字段数组长度一致，避免行数据缺失
    const rowCount = project_id.length;
    if (![imp_or_ann.length, category.length, cost.length, hours.length].every(len => len === rowCount)) {
        return res.status(400).json({msg: '所有行的字段请填写完整'});
    }
    // 组装插入数据
    const insertData = [];
    for (let i = 0; i < rowCount; i++) {
        insertData.push({
            project_id: project_id[i],
            imp_or_ann: imp_or_ann[i],
            category: category[i],
            cost: Number(cost[i]), // 转换为数字类型适配REAL字段
            hours: Number(hours[i]) // 转换为数字类型适配REAL字段
        })
    }
    const costHours = await Prjt_costs_hours.bulkCreate(insertData);
    return res.redirect('/fundings')
} catch (error) {
    console.error(error.message);
    return res.status(500).json(error);
}

提示：如果你用的是Express框架，需要确保配置了app.use(express.urlencoded({ extended: true }))，才能正常解析表单提交的数组格式参数。

可选优化 #

可以把前端cost和hours的input类型改成type="number"，限制用户只能输入数字，减少后端转换出错的概率。

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