React+MySQL用户注册失败：数据未入库且登录异常排查

一、注册问题：数据无法入库且参数显示在URL #

1. 修复React表单默认提交行为 #

pages/Register.jsx中存在拼写错误，导致表单默认以GET方式提交，参数暴露在URL中，同时axios请求未正常发送：

// 修正handleClick中的拼写错误
const handleClick = async (e) => {
    e.preventDefault(); // 原代码为e.prevendDefault()，拼写错误
    try {
        await axios.post("http://localhost:8800/api/auth/register", inputs);
    } catch(err) {
        setErr(err.response.data);
    }
}

同时给按钮添加type="button"，避免触发表单默认提交：

<button type="button" onClick={handleClick}>Register</button>

2. 修复后端SQL语句错误 #

/controllers/auth.js中注册逻辑的SQL语句关键字拼写错误，导致数据无法插入：

// 原代码为VALUE，改为VALUES
const q = "INSERT INTO users (`username`,`email`,`password`) VALUES (?)";

二、登录问题：控制台显示空参数 #

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

后端未配置解析JSON请求体的中间件，导致req.body为空，无法获取登录参数。在Express主入口文件（如app.js）中添加：

import express from "express";
const app = express();

// 必须添加此中间件，解析POST请求的JSON体
app.use(express.json());

// 挂载路由
import authRoutes from "./routs/auth.js";
app.use("/api/auth", authRoutes);

2. 检查登录组件的一致性问题 #

如果你的登录组件（Login.jsx）结构与注册组件类似，需同步修复：

• 确保handleSubmit函数中调用e.preventDefault()
• 登录按钮设置type="button"
• 输入框正确绑定name属性和onChange事件

额外检查项 #

• 确认MySQL的users表字段名与代码中的username、email、password完全匹配
• 验证connect.js中的数据库连接配置正确，能正常访问MySQL
• 用浏览器开发者工具的Network标签，检查请求方法为POST，且请求体包含正确参数

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