React+PHP(XAMPP)接口调用重复插入数据，一行空一行正常

最常见的两个原因及解决办法： #

1. 未阻止浏览器默认表单提交行为

你大概率在React的onSubmit回调里忘了加e.preventDefault()，导致浏览器在执行你写的fetch请求之外，还会触发默认的表单提交（相当于再发一次POST请求到当前页面）。这就会造成两次请求：一次是你的fetch带正确数据，一次是浏览器默认提交（可能因时机问题没带上有效数据，产生空行）。

修复代码示例：

const handleSubmit = (e) => {
  e.preventDefault(); // 必须加！阻止浏览器默认提交行为
  // 你的fetch逻辑放在这里
  fetch('/register.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      username: yourUsername,
      password: yourPassword
    })
  })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
}

2. PHP未过滤非POST请求

浏览器对部分跨域请求、或Content-Type非application/x-www-form-urlencoded的请求，会先发一个OPTIONS预检请求。如果你的PHP代码没判断请求方法，直接执行插入逻辑，就会先插入一行空数据（OPTIONS请求不带POST参数），之后真正的POST请求再插入正确数据。

修复代码示例：

<?php
// 只处理POST请求，OPTIONS或其他请求直接终止
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405); // 返回方法不允许的状态码
    exit;
}

// 后续写数据库连接、插入逻辑
$conn = mysqli_connect("localhost", "root", "", "your_db");
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
// ...执行插入语句
?>

其他排查方向：

• 检查请求路径是否触发重定向：比如你请求http://localhost/register，Apache自动重定向到http://localhost/register/（加斜杠），会导致两次请求。解决办法是前端请求地址写完整，比如http://localhost/register.php，或调整Apache配置关闭不必要的重定向。
• 确认前端请求次数：在fetch代码里加console.log('发送请求:', new Date())，查看浏览器控制台是否打印两次。如果是，检查组件是否重复渲染、事件是否重复绑定（比如form上既加了onSubmit，又在按钮上加了onClick触发submit）。

内容的提问来源于stack exchange，提问作者The Canadian