React+Node.js+MySQL表单提交字段全为NULL报错求助

你的问题核心是前后端传递的参数键名不匹配，导致后端无法正确获取前端表单输入值，最终向数据库插入NULL，触发了非空字段的约束错误。以下是具体修复方案：

1. 对齐前后端参数键名（推荐方案） #

前端Axios发送的参数键必须和后端接收的键完全一致，否则后端会拿到undefined，最终SQL插入时转为NULL。

修改前端App.js的请求参数 #

将Axios请求的参数键名改为后端期望的employeeName、employeeAge、employeePosition、employeeSalary，同时添加错误捕获方便调试：

const submitData = () => {
  // 先做表单非空校验，避免无效请求
  if (!employeeName || !employeeAge || !employeePosition || !employeeSalary) {
    alert('请填写所有必填字段');
    return;
  }

  Axios.post('http://localhost:3001/api/insert', {
    employeeName: employeeName, 
    employeeAge: employeeAge, 
    employeePosition: employeePosition, 
    employeeSalary: employeeSalary
  }).then(()=>{
    alert('Berhasil')
  }).catch(err => {
    console.error('提交失败:', err);
    alert('提交失败，请查看控制台日志')
  })
}

（可选）修改后端接收逻辑 #

如果不想改动前端，也可以让后端对齐前端发送的键名（注意前端position是小写，需统一）：

app.post("/api/insert", (req, res) => {
    const Name = req.body.Name
    const Age = req.body.Age
    const Position = req.body.position // 匹配前端的小写position
    const Salary = req.body.Salary

    const sqlInsert = "INSERT INTO employee (Name, Age, Position, Salary) VALUES (?,?,?,?)"
    db.query(sqlInsert, [Name, Age, Position, Salary], (err, result)=>{
        if(err) {
            console.log(err);
            res.status(500).send('数据插入失败');
        } else {
            res.status(200).send('数据插入成功');
        }
    });
})

2. 额外优化建议 #

• 统一命名规范：前后端参数命名保持一致，比如全用驼峰式（employeeName）或下划线式（employee_name），避免大小写、命名方式不一致的问题。
• 后端响应反馈：不要只在控制台打印错误，需向前端返回明确的状态码和提示信息，方便前端处理结果。
• 表单验证增强：可以在输入框添加必填标记，或使用React表单库（如Formik）做更严谨的校验。

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