Next.js向MySQL提交数据报错：Cannot read properties of undefined (reading 'Player')

问题分析与解决方案 #

1. 请求体获取错误（核心问题） #

前端直接将formData序列化为JSON发送，但后端错误地尝试从req.body.formData读取数据——实际上req.body本身就是你需要的表单数据对象。

修改后端数据获取逻辑：

// 原错误代码
const FormData = req.body.formData;

// 改为
const formData = req.body;

注意：后端访问字段时要和前端表单input的name属性严格一致（包括大小写），比如前端name="Player"，后端就用formData.Player。

2. API路由文件位置错误（导致404） #

Next.js的API路由必须放在项目根目录的pages/api文件夹下，且文件名要和路由路径匹配。你需要确保：

• 后端代码文件路径为pages/api/addplayer.js
• 开发服务器启动后，/api/addplayer路径可正常访问

3. 数据库连接泄漏问题 #

每次请求创建连接后未关闭，长期运行会导致数据库连接耗尽。建议在请求处理完成后关闭连接：

try{
    const formData = req.body;
    console.log(formData);
    await dbconnection.query(
        "INSERT INTO player (player_id, player_name, Country, Position, Age, Club, club_id) VALUES (?,?,?,?,?,?,?)",
        [player_id, formData.Player, formData.Country, formData.Position, formData.Age, formData.Club, club]
    );
    res.status(200).json({ players: formData });
    await dbconnection.end(); // 请求完成后关闭连接
} catch ( error ) {
    await dbconnection.end(); // 异常时也需关闭连接
    res.status(400).json({ error: error.message }); // 404表示资源不存在，此处用400表示请求错误更准确
}

4. 固定player_id的潜在冲突 #

当前player_id设为固定值302，第二次提交会触发主键冲突报错。建议改为数据库自增主键：

-- 修改表结构，设置player_id为自增主键
ALTER TABLE player MODIFY COLUMN player_id INT AUTO_INCREMENT PRIMARY KEY;

之后插入时可省略player_id字段，由数据库自动生成：

await dbconnection.query(
    "INSERT INTO player (player_name, Country, Position, Age, Club, club_id) VALUES (?,?,?,?,?,?)",
    [formData.Player, formData.Country, formData.Position, formData.Age, formData.Club, club]
);

5. 前端表单字段一致性检查 #

确保前端每个表单输入框的name属性和后端访问的字段名完全一致，示例：

<form onSubmit={handleSubmit}>
  <input type="text" name="Player" placeholder="球员姓名" />
  <input type="text" name="Country" placeholder="国家" />
  <!-- 其他字段 -->
  <button type="submit">提交</button>
</form>

验证步骤 #

1. 启动开发服务器，访问http://localhost:3000/api/addplayer，此时GET请求会进入catch块，但不会出现"Cannot read properties of undefined"错误
2. 提交前端表单，查看后端控制台是否打印正确的formData
3. 检查数据库是否成功插入数据

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