Express+Handlebars表单提交报错：Cannot read 'matricula' of undefined

1. 先查表单提交基础配置 #

• 确认表单的method是POST，action指向正确的路由，比如：

  <form method="POST" action="/alunos/cadastrar">
    <!-- 表单输入项 -->
  </form>
  

• 检查Express是否配置了表单解析中间件：
  普通表单（application/x-www-form-urlencoded）必须加这行：

  app.use(express.urlencoded({ extended: true }));
  

  要是表单带文件（multipart/form-data），得用multer这类中间件，不然根本读不到数据。

2. 核对表单字段的name属性 #

后端能拿到数据的前提是，表单输入项必须设置正确的name，而且要和后端读取的字段名完全一致，比如：

<input type="text" name="matricula" placeholder="Matrícula">
<input type="text" name="nome" placeholder="Nome">
<input type="text" name="curso" placeholder="Curso">
<input type="number" name="ano" placeholder="Ano">

别写错大小写或者漏写name，不然req.body里根本找不到对应字段。

3. 检查路由里的取值逻辑 #

确保路由里是从req.body里拿值，先打印req.body确认有没有数据：

router.post('/cadastrar', async (req, res) => {
  // 先打印看数据是否正常接收
  console.log(req.body);
  const { matricula, nome, curso, ano } = req.body;
  try {
    await Aluno.create({ matricula, nome, curso, ano });
    res.redirect('/alunos');
  } catch (err) {
    console.error(err);
    res.status(500).send('Erro ao cadastrar aluno');
  }
});

如果console.log(req.body)输出undefined，就是中间件没配对；如果是空对象，就是表单name属性错了。

4. 确认Sequelize模型字段匹配 #

检查Aluno模型里的字段定义，确保和表单提交的字段名一致，比如：

const Aluno = sequelize.define('Aluno', {
  matricula: {
    type: DataTypes.STRING,
    allowNull: false
  },
  nome: {
    type: DataTypes.STRING,
    allowNull: false
  },
  curso: {
    type: DataTypes.STRING
  },
  ano: {
    type: DataTypes.INTEGER
  }
});

别出现模型里是matricula，表单里写成matricula_num这种不匹配的情况。

5. 用浏览器工具抓包验证 #

按F12打开开发者工具，提交表单后看网络请求里的Form Data：

• 如果这里是空的，说明表单没正确提交数据，回到前面的步骤查表单属性和中间件；
• 如果能看到字段和对应值，那问题大概率出在后端路由或模型的字段匹配上。

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