React+PHP注册登录系统：用户重复注册校验失效问题排查

1. 修改PHP注册接口（新增用户存在校验） #

先查询数据库中是否已存在目标用户，再决定是否执行插入操作，同时用预处理语句避免SQL注入：

<?php
// 替换为你的数据库连接信息
$conn = mysqli_connect("localhost", "db_user", "db_pass", "db_name");

$email = $_POST['email'];
// 密码必须加密存储
$hashedPwd = password_hash($_POST['password'], PASSWORD_DEFAULT);

// 检查用户是否已注册
$checkStmt = mysqli_prepare($conn, "SELECT id FROM users WHERE email = ?");
mysqli_stmt_bind_param($checkStmt, "s", $email);
mysqli_stmt_execute($checkStmt);
mysqli_stmt_store_result($checkStmt);

if (mysqli_stmt_num_rows($checkStmt) > 0) {
    // 用户已存在，返回错误提示
    echo json_encode(['success' => false, 'msg' => '该邮箱已被注册']);
} else {
    // 用户不存在，执行注册插入
    $insertStmt = mysqli_prepare($conn, "INSERT INTO users (email, password) VALUES (?, ?)");
    mysqli_stmt_bind_param($insertStmt, "ss", $email, $hashedPwd);
    
    if (mysqli_stmt_execute($insertStmt)) {
        echo json_encode(['success' => true, 'msg' => '注册成功']);
    } else {
        echo json_encode(['success' => false, 'msg' => '注册失败，请重试']);
    }
}

mysqli_stmt_close($checkStmt);
mysqli_stmt_close($insertStmt);
mysqli_close($conn);
?>

2. 修改React注册组件（处理后端提示） #

在表单提交逻辑中，根据后端返回的结果弹出提示或更新页面信息：

import { useState } from 'react';

function RegisterForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errorMsg, setErrorMsg] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        setErrorMsg('');
        
        try {
            const res = await fetch('/api/register.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`
            });
            const data = await res.json();
            
            if (data.success) {
                alert(data.msg);
                // 注册成功后可跳转至登录页
            } else {
                alert(data.msg); // 弹出已注册提示
                setErrorMsg(data.msg);
            }
        } catch (err) {
            alert('网络异常，请稍后再试');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>邮箱:</label>
                <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                />
            </div>
            <div>
                <label>密码:</label>
                <input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                />
            </div>
            {errorMsg && <p style={{color: '#ff4d4f'}}>{errorMsg}</p>}
            <button type="submit">注册</button>
        </form>
    );
}

export default RegisterForm;

3. 顺带修复登录接口的用户校验 #

如果需要完善登录逻辑，同样先校验用户是否存在：

<?php
$conn = mysqli_connect("localhost", "db_user", "db_pass", "db_name");

$email = $_POST['email'];
$password = $_POST['password'];

// 查询用户是否存在
$stmt = mysqli_prepare($conn, "SELECT password FROM users WHERE email = ?");
mysqli_stmt_bind_param($stmt, "s", $email);
mysqli_stmt_execute($stmt);
mysqli_stmt_store_result($stmt);

if (mysqli_stmt_num_rows($stmt) === 0) {
    echo json_encode(['success' => false, 'msg' => '该用户未注册']);
} else {
    // 验证密码正确性
    mysqli_stmt_bind_result($stmt, $storedPwd);
    mysqli_stmt_fetch($stmt);
    if (password_verify($password, $storedPwd)) {
        echo json_encode(['success' => true, 'msg' => '登录成功']);
        // 这里可设置登录session或返回token
    } else {
        echo json_encode(['success' => false, 'msg' => '密码错误']);
    }
}

mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

关键注意事项 #

• 务必替换代码中的数据库连接信息为你自己的配置
• 密码必须通过password_hash加密存储，禁止明文保存
• 前端提交数据时用encodeURIComponent避免字符编码问题
• 可替换alert为更美观的UI组件（如Ant Design的Message）提升体验

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