React Hooks表单数据插入异常排查：Payload有数据但响应错误

先帮你梳理下代码里的几个核心问题，这些大概率是导致你提交异常的原因：

1. Fetch请求的Header拼写错误 #

你的fetch配置里写的是header，但正确的属性名是**headers（复数形式）**，这会导致Content-Type: application/json没有被正确设置，后端可能无法识别请求体的JSON格式，进而解析失败。

修正后的fetch代码片段：

fetch('request url', {
  method: 'POST',
  body: JSON.stringify(user), // 这里还有个结构问题，下面会说
  headers: { 'Content-Type': 'application/json' }, // 改成复数headers
})

2. 请求体结构与后端解析不匹配 #

你前端提交的是JSON.stringify({ user })，这会生成类似这样的JSON结构：

{
  "user": {
    "Name": "xxx",
    "Email": "xxx@xxx.com",
    "Phone": "123456"
  }
}

但后端代码里直接用$user->Name去取值，实际上$user的顶层是user对象，正确的取值应该是$user->user->Name。

更简洁的做法是前端直接提交user对象本身，把body: JSON.stringify({ user })改成body: JSON.stringify(user)，这样后端的$user->Name就能正确拿到值了。

3. React useState初始化的潜在问题 #

如果props.user初始是undefined，第一次执行setUser({ ...user, Name: e.target.value })的时候，展开undefined会报错。建议初始化时兜底为空对象：

const [user, setUser] = useState(props.user || {})

4. PHP代码的几个关键问题 #

• 缺少响应返回逻辑：你的insertUser函数最后没有把$response输出给前端，需要在函数末尾加上echo json_encode($response);，否则前端会收到空响应或者服务器错误。
• 未处理$user不存在的情况：如果json_decode失败，$user是null，这时候你的代码没有设置对应的响应，需要补充：

  } else {
      $response=array(
          'status' => 400,
          'status_message' =>'Invalid JSON payload.'
      );
  }
  echo json_encode($response); // 一定要输出响应给前端
  

• 严重的SQL注入风险：直接把用户输入拼接到SQL语句里是非常危险的，建议使用预处理语句来避免注入，示例：

  $query = "INSERT INTO user(Name, Email, Phone) VALUES(?, ?, ?)";
  $stmt = mysqli_prepare($con, $query);
  mysqli_stmt_bind_param($stmt, "sss", $name, $email, $phone);
  if(mysqli_stmt_execute($stmt)) {
      // 成功逻辑
      $response=array(
          'status' => 201,
          'status_message' =>'User Added Successfully.',
          'status_name' => $name
      );
  } else {
      // 失败逻辑
      $response=array(
          'status' => 400,
          'status_message' =>'User insert Failed.'
      );
  }
  

额外调试建议 #

• 打开浏览器的开发者工具（Network标签），查看POST请求的Response内容，看看后端返回的具体错误信息，这能帮你更快定位问题。
• 在PHP代码里可以先打印file_get_contents("php://input")，确认收到的请求体是否符合预期。

按照上面的点逐一修正后，应该就能解决数据插入的异常问题啦。

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