React+Express+Axios表单提交MySQL遇'name'列非空错误求助

问题根源与修复方案 #

1. 前端未传递表单数据到后端

你的form.js中，axios.post调用时没有将收集到的values作为请求体发送，导致后端req.body为空，所有字段值都是NULL，触发MySQL非空约束错误。

修改form.js中的handleSubmit函数：

const handleSubmit = (e) => {
    e.preventDefault();
    // 新增第二个参数，传递表单数据values
    axios.post(`http://localhost:8000/`, values)
    .then(res => console.log(res))
    .catch(err => console.log(err))
}

2. 后端SQL参数传递方式错误

你的server.js中，SQL语句使用VALUES(?)占位符，但参数传递时用了[values]（二维数组），这会导致MySQL无法正确解析单个占位符对应的多个字段值。

修改server.js中的POST接口：

app.post('/', (req, res) => {
    // 将占位符改为与字段数量匹配的四个?
    const sql = "INSERT INTO students (`name`, `course`, `email`, `phone`) VALUES (?, ?, ?, ?)";
    const values = [
        req.body.name,
        req.body.course,
        req.body.email,
        req.body.phone
    ]
    // 直接传递values数组，而非包裹成二维数组
    db.query(sql, values, (err,result) => {
        if(err) return res.json(err)
        return res.json(result);
    })
})

完成以上两处修改后，表单数据就能正确传递到后端并插入MySQL数据库了。

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