React+MySQL注册页：INSERT查询执行成功却未写入数据库的问题

问题背景 #

开发React+MySQL注册页面时，前端提交表单后控制台显示“Registered Successfully”，但数据库中无新增记录。使用MAMP服务器（localhost:8888，带phpMyAdmin），前后端分别通过npm start启动。

原始代码 #

后端server.js #

const express = require("express");
const mysql = require("mysql");
const cors = require("cors");

const app = express();
app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "my_db",
});

app.post("/signup", (req, res) => {
  const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?)";
  const values = [req.body.name, req.body.email, req.body.password];
  db.query(sql, [values], (err, data) => {
    if (err) return res.json(err);
    return res.json(data);
  });
});

app.listen(8081, () => {
  console.log("Listening...");
});    

前端App.js #

import React from "react";
import SignUp from "./SignUp";

function App() {
  return <SignUp></SignUp>;
}

export default App;

前端SignUp.js #

import React, { useState } from "react";
import axios from "axios";

function SignUp() {
  const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
  });
  const handleChange = (event) => {
    setValues({ ...values, [event.target.name]: [event.target.value] });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    axios
      .post("http://localhost:8081/signup", values)
      .then((res) => console.log("Registered Successfully"))
      .catch((err) => console.log(err));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
          type="text"
          placeholder="Enter Name"
          name="name"
          className="form-control rounded-0"
          onChange={handleChange}
        />
      {/* 另外两个邮箱和密码输入框 */}
    </form>
  );
}

export default SignUp;

修改后的问题（编辑1） #

根据建议修改server.js的SQL语句和参数传递：

app.post("/signup", (req, res) => {
  const sql =
    "INSERT INTO login (`name`, `email`, `password`) VALUES (?, ?, ?)";
  const values = [req.body.name, req.body.email, req.body.password];
  db.query(sql, values, (err, data) => {
    if (err) {
      console.error("Error in signup", err);
      return res.sendStatus(500);
    }
  });
});

此时前端出现500错误：

POST http://localhost:8081/signup 500 (Internal Server Error)

错误响应详情（编辑2） #

响应显示数据库字段类型不匹配，原因是前端传递的字段值为数组类型，而数据库表login的name、email、password字段为字符串类型。

问题根源与修复方案 #

1. 前端数据类型错误 #

SignUp.js的handleChange方法中，错误地将输入值包裹为数组，导致后端接收的参数类型与数据库字段不兼容：

// 错误写法
setValues({ ...values, [event.target.name]: [event.target.value] });

// 正确写法
setValues({ ...values, [event.target.name]: event.target.value });

2. 后端SQL参数传递优化 #

两种可行的SQL写法：

• 写法一：使用VALUES (?)，直接传递数组参数

const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?)";
const values = [req.body.name, req.body.email, req.body.password];
db.query(sql, values, (err, data) => {
  if (err) return res.status(500).json({ error: err.message });
  return res.json({ message: "注册成功" });
});

• 写法二：使用VALUES (?, ?, ?)，传递对应参数数组（与编辑1的SQL写法一致）

3. 完善数据库连接配置 #

MAMP的MySQL默认配置与常规本地MySQL不同，需修正连接参数：

const db = mysql.createConnection({
  host: "localhost",
  port: 8889, // MAMP默认MySQL端口
  user: "root",
  password: "root", // MAMP默认root密码
  database: "my_db",
});

// 增加连接验证，排查连接问题
db.connect((err) => {
  if (err) {
    console.error("数据库连接失败:", err);
    return;
  }
  console.log("数据库连接成功");
});

4. 错误反馈优化 #

后端返回具体错误信息，方便前端排查：

app.post("/signup", (req, res) => {
  const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?, ?, ?)";
  const values = [req.body.name, req.body.email, req.body.password];
  db.query(sql, values, (err, data) => {
    if (err) {
      console.error("注册错误:", err);
      return res.status(500).json({ error: err.message });
    }
    return res.json({ message: "注册成功", insertId: data.insertId });
  });
});

总结 #

核心问题是前端传递数组类型数据导致数据库插入失败，加上MAMP数据库默认配置未匹配。修复前端数据赋值逻辑、修正数据库连接参数后，即可正常写入数据。

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