React项目中Express无法将表单数据插入MySQL问题排查

核心问题 #

你遇到的SQL插入值全为NULL的情况，主要由两个原因导致：

1. Express未配置JSON请求体解析中间件：Express默认不会自动解析JSON格式的请求体，导致req.body为空，解构出的变量全部为undefined，最终被MySQL转为NULL。
2. 变量拼写错误：后端代码中解构的comapny（拼写少了一个'n'）与请求数据中的company字段不匹配，导致该字段值无法正确获取。

修复步骤 #

1. 添加请求体解析中间件 #

在你的Express应用入口文件中，在所有路由定义之前添加以下代码，用于解析JSON和表单格式的请求体：

// 解析JSON格式请求体
app.use(express.json());
// 解析x-www-form-urlencoded格式的表单数据（可选，若前端有此类请求则添加）
app.use(express.urlencoded({ extended: true }));

2. 修正变量拼写错误 #

修改后端路由代码中的拼写错误，将comapny改为company：

app.post("/registerUser",(req,res)=>{
    // 修正拼写错误：comapny → company
    const {name,company,email,phone,location,photo,address,password,cpassword} = req.body
    const registerUser = `insert into employee (name,company,email,phone,location,photo,address,password,cpassword) values (?,?,?,?,?,?,?,?,?);`
    
    // 可选：添加调试日志，确认数据是否正确获取
    console.log("请求体数据：", req.body);
    console.log("解构后的变量：", {name,company,email,phone,location,photo,address,password,cpassword});

    db.query(registerUser,[name,company,email,phone,location,photo,address,password,cpassword],(err,doc)=>{
        if(err){
            console.log(err);
            // 建议返回错误响应给前端，便于调试
            res.status(500).json({error: err.message});
        }
        else{
            res.json({message: "用户注册成功", result: doc})
        }
    })
})

3. 测试验证 #

修改完成后，重新启动后端服务，用Postman再次发送请求，即可正常插入数据到MySQL数据库。

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