前端提交表单至Sequelize数据库时出现values.map is not a function错误

核心原因 #

values.map is not a function 错误的本质是后端接收的某个字段（大概率是Diet_type）不是数组类型，但Sequelize模型定义中该字段为数组类型，导致Sequelize在处理数据时对非数组值调用了map方法。因为Insomnia可以正常提交，说明后端逻辑本身没问题，问题出在前端提交的数据格式不匹配。

排查步骤 #

1. 前端验证提交数据格式
   在前端提交表单前，遍历打印FormData的内容，确认Diet_type的类型：

   const formData = new FormData(formElement);
   // 遍历FormData查看实际提交的键值对
   for (const [key, value] of formData.entries()) {
     console.log(`${key}:`, value, `类型: ${typeof value}`);
   }
   

   重点看Diet_type是否为字符串而非数组，或者是否是单个值而非多个值集合。

2. 核对后端模型定义
   检查Recipe模型中Diet_type的字段类型，确认是否为数组：

   // 示例Sequelize模型定义
   Diet_type: {
     type: DataTypes.ARRAY(DataTypes.STRING),
     allowNull: false
   }
   

   如果是数组类型，后端必须接收数组格式的数据。

具体解决方案 #

方案1：前端调整FormData的提交方式 #

如果前端是多选组件（比如多选框、下拉多选），需将数组中的每个元素单独添加到FormData中，而非直接传入数组：

// 假设dietTypes是收集到的多选数组，如['vegan', 'gluten-free']
const formData = new FormData(formElement);
// 先移除可能存在的字符串类型Diet_type
formData.delete('Diet_type');
// 逐个添加数组元素
dietTypes.forEach(type => {
  formData.append('Diet_type', type);
});

这样后端req.body.Diet_type会自动解析为数组。

方案2：后端添加数据格式兼容处理 #

如果前端只能提交逗号分隔的字符串（比如输入框输入vegan,gluten-free），在后端路由中先将字符串转为数组：

// 后端路由处理逻辑
const { Diet_type } = req.body;
// 处理Diet_type：如果是字符串则分割为数组，否则保留原数组
const processedDietType = Array.isArray(Diet_type) 
  ? Diet_type 
  : Diet_type.split(',').map(item => item.trim());

// 传入Sequelize的create方法
const newRecipe = await Recipe.create({
  ...req.body,
  Diet_type: processedDietType,
  // 其他字段...
});

额外注意事项 #

• 前端使用axios提交FormData时，不要手动设置Content-Type: multipart/form-data，axios会自动识别FormData并设置正确的请求头，手动设置可能导致边界符错误。
• 确认multer中间件的位置正确，确保在处理表单字段前已经完成文件上传，但不会影响普通字段的解析。

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