NodeJS路由无法将React表单值正确插入MySQL表求助

核心问题分析 #

1. SQL语句写法错误：

   • 第一种模板字符串拼接方式完全错误，模板字符串中应使用${变量}语法而非"+变量+"，原写法会导致插入"+req.body.name+"这类字面量文本，而非实际表单值。
   • 第二种写法VALUES (name, country, dob)是将数据库列名当作值，而非你传入的变量，数据库会尝试读取这三个列的现有值（插入场景下不存在对应值，会导致报错或空值插入）。

2. 未使用参数化查询：直接拼接SQL不仅存在SQL注入风险，还容易引发语法错误。

3. 可能缺少JSON解析中间件：Express默认不会解析JSON格式请求体，若未配置express.json()，req.body会是undefined，导致无法获取表单值。

4. 日期格式不兼容：React传入的是Date对象，MySQL需要标准日期字符串（如YYYY-MM-DD或YYYY-MM-DD HH:mm:ss），直接传入对象可能导致插入失败或日期异常。

修复步骤 #

1. 确保Express配置JSON解析中间件 #

在你的Express主文件（如app.js）中添加：

const express = require('express');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());

2. 修正路由中的SQL语句，使用参数化查询 #

修改路由代码如下：

const express = require('express');
const router = express.Router(); 
const pool = require('../config/db');

router.post("/create", (req, res) => {
  // 解构获取表单提交的字段值
  const { name, country, dob } = req.body;

  // 将Date对象转换为MySQL兼容的日期字符串
  const formattedDob = new Date(dob).toISOString().slice(0, 19).replace('T', ' ');

  // 用?作为占位符的参数化SQL，避免拼接错误与注入风险
  const sql = `INSERT INTO users (name, country, dob) VALUES (?, ?, ?)`;
  
  pool.query(sql, [name, country, formattedDob], function(error, results){
    if (error) {
      console.error(error); // 打印错误日志便于排查
      return res.status(500).send('数据插入失败');
    }
    // 插入后的ID需从results.insertId获取，而非results.id
    res.status(201).send(`User added with ID: ${results.insertId}`);
    console.log('插入成功：', name, country, formattedDob);
  })
});

3. 优化React提交逻辑（可选但推荐） #

提交时只传递所需字段，避免冗余数据：

const handleSubmit = (e) => {
  e.preventDefault();
  // 仅提取需要提交的字段
  const { name, country, dob } = this.state;
  axios.post('http://localhost:4000/app/create', { name, country, dob })
    .then(response => console.log(response.data))
    .catch(err => console.error('请求错误：', err)); // 添加错误捕获，便于排查请求问题
  console.log(this.state);
}

额外注意事项 #

• 检查MySQL表字段类型：dob字段需设置为DATE或DATETIME类型，确保与传入的格式匹配。
• 查看服务器端控制台日志：若问题仍存在，打印req.body确认是否正确接收数据，打印SQL错误信息定位具体问题。

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