React与PHP集成POST数据异常：重复存储、重复返回及集成失败求助

我来帮你一步步排查和解决这三个问题，咱们从代码细节和常见坑点入手：

你的Axios请求写法有个小错误——Axios的post方法参数顺序是：url, 请求体数据, 配置项（含headers），但你把请求体包在了data字段里，还把headers和请求体放在了同一个对象里，导致PHP根本拿不到正确的参数。

修正后的Axios代码：

axios.post('http://localhost/scripts/student/signup.php',
  // 直接传请求体数据，不用包在data里
  { 
    "rollnumber": rno, 
    "firstname": fname, 
    "lastname": lname, 
    "username": uname, 
    "password": pass 
  },
  // headers单独放在第三个参数的配置对象里
  { headers: headers }
).then(response => {
  console.log(response);
})

另外，Axios默认发送的是Content-Type: application/json格式的数据，PHP的$_POST数组是拿不到JSON格式参数的，得用php://input来解析：

// 在PHP开头添加这段，获取并解析JSON请求体
$postData = json_decode(file_get_contents('php://input'), true);
// 之后就可以用$postData['rollnumber']这样的方式获取参数了

还要记得处理跨域问题，在PHP文件开头添加CORS头部：

header("Access-Control-Allow-Origin: http://localhost:3000"); // 替换成你的React项目端口
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

这个问题大概率是OPTIONS预检请求被误处理导致的：浏览器在发送POST请求前，会先发送OPTIONS请求验证跨域权限，如果你的PHP没有判断请求方法，就会把OPTIONS请求也当成POST请求执行插入——而OPTIONS请求没有请求体，所以插入了空记录，之后真正的POST请求又插入了有效数据。

PHP里添加请求方法判断：

// 先处理OPTIONS预检请求，直接返回200
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
  http_response_code(200);
  exit();
}

// 只有POST请求才执行插入逻辑
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 这里写你的数据库插入代码
}

另外还要检查React端是否不小心触发了两次请求：比如把提交逻辑写在了组件的render方法里，或者useEffect没有加正确的依赖数组，导致每次组件渲染都调用一次POST。如果是按钮触发提交，一定要把请求放在按钮的onClick事件里，不要放在渲染逻辑中。

这个在React开发模式下很常见——React的严格模式会强制组件渲染两次（用来检测副作用），再加上初始的第一次渲染，就会出现三次请求/结果。

如果是开发环境下的现象，这是正常的，生产环境会自动消失。如果是实际请求被发送了三次，那要检查：

• 获取数据的逻辑是否放在了useEffect里，有没有加空的依赖数组[]（确保只在组件挂载时执行一次）
• 是否有其他状态变化导致组件重复渲染，进而重复触发获取数据的请求

正确的获取数据示例：

useEffect(() => {
  // 这里写获取数据的Axios请求
}, []); // 空依赖数组，只执行一次

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