表单提交报错Cannot read properties of undefined (reading 'name')求助

问题现象 #

localhost:4000可正常加载Appointment.html，但点击提交按钮路由到localhost:4000/add时，控制台抛出错误：Cannot read properties of undefined (reading 'name')

问题代码 #

app.js

const app = express();
const bodyParser = require('body-parser');
const router = require('./route/router');
app.use(router)

app.use(express.static(__dirname + '/public'));

app.use(bodyParser.json);
app.use(
  bodyParser.urlencoded({
    extended: false,
  }),
);

app.listen(4000);

router.js

const express = require('express');
const bodyParser = require('body-parser');
const controller = require('../controller/controller');

const router = express.Router();
router.get('/',controller.homePage);
router.get('/add',controller.getItem);
router.post('/add',(res,req)=>{console.log(res.body.name)})


module.exports = router;

controller.js

const { query } = require('express');
const Item = require('../models/item')


exports.getItem = (req, res, next) => {
    console.log('get!'+req)
}
exports.postItem = (req, res, next) => {
    console.log(req.body.name)
};

exports.homePage = (req, res, next) =>{
    res.sendFile(__dirname + '/Appointment.html');
}

错误原因及修复方案 #

1. 中间件加载顺序错误

app.js中先加载了路由router，后加载body-parser。这会导致路由处理请求时，请求体还没被解析，req.body自然是undefined。

修复：调整顺序，先加载解析中间件，再加载路由：

// 先初始化请求体解析中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 再加载路由
app.use(router);

2. bodyParser.json调用缺少括号

bodyParser.json是函数，需要调用才能返回中间件实例。原代码少了()，导致JSON解析中间件未正确初始化。

修复：改为bodyParser.json()

3. 路由回调参数顺序颠倒

router.js的post('/add')回调中，参数顺序写成了(res, req)，而Express路由回调的正确顺序是(req, res, next)。这会导致错误地从res.body读取属性，但res对象根本没有body属性。

修复：调整参数顺序为(req, res)：

router.post('/add',(req, res)=>{console.log(req.body.name)})

4. （可选）统一使用controller处理逻辑

建议统一使用controller.js中的postItem方法，保持代码结构一致：

router.post('/add', controller.postItem);

修正后的完整代码 #

app.js

const app = express();
const bodyParser = require('body-parser');
const router = require('./route/router');

// 先加载请求体解析中间件
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false,
  }),
);

// 加载路由
app.use(router);
app.use(express.static(__dirname + '/public'));

app.listen(4000);

router.js

const express = require('express');
const controller = require('../controller/controller');

const router = express.Router();
router.get('/', controller.homePage);
router.get('/add', controller.getItem);
router.post('/add', controller.postItem);

module.exports = router;

controller.js无需修改，postItem方法已正确读取req.body.name。

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