React表单POST请求发送空对象：console.log已捕获输入值

核心错误点 #

你的代码里fetch请求的请求头参数拼写错误，把headers写成了header，导致服务器无法正确解析JSON格式的请求体，因此只生成了唯一ID，其他字段为空。

修复步骤 #

1. 修正fetch中的请求头参数：将header改为headers（复数形式）
2. 移除handleChange里多余的e.preventDefault()，input的change事件不需要阻止默认行为
3. 可选：在fetch的回调中添加响应解析和错误捕获，方便后续调试

修复后的完整代码 #

import React, { useState } from "react";

const blankNewLegend = {
  name: "",
  image: "",
  nickname: "",
  legendType: "",
  tactAbility: "",
  passAbility: "",
  ultAbility: "",
  season: 0,
  likes: 0,
};

function NewLegendForm() {
  const [newLegend, setNewLegend] = useState(blankNewLegend);

  function handleChange(e) {
    setNewLegend((prev) => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  }

  function handleSubmit(e) {
    e.preventDefault();

    console.log(newLegend);
    
    fetch('http://localhost:6004/legends', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(newLegend),
    })
    .then((res) => res.json())
    .then(data => console.log("提交返回结果:", data))
    .catch(err => console.error("提交出错:", err));
  }

  return (
    <div className="new-legend-form">
      <h2>Add New Legend</h2>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" placeholder="Legend name" value={newLegend.name} onChange={handleChange}/>
        <input type="text" name="image" placeholder="Image URL" value={newLegend.image} onChange={handleChange}/>
        <input type="text" name="nickname" placeholder="Nickname" value={newLegend.nickname} onChange={handleChange}/>
        <input type="text" name="legendType" placeholder="Legend Type" value={newLegend.legendType} onChange={handleChange}/>
        <input type="text" name="tactAbility" placeholder="Tactical Ability" value={newLegend.tactAbility} onChange={handleChange}/>
        <input type="text" name="passAbility" placeholder="Passive Ability" value={newLegend.passAbility} onChange={handleChange}/>
        <input type="text" name="ultAbility" placeholder="Ultimate Ability" value={newLegend.ultAbility} onChange={handleChange}/>
        <input type="number" name="season" placeholder="Debut Season" value={newLegend.season} onChange={handleChange}/>
        <input type="number" name="likes" placeholder="Likes" value={newLegend.likes} onChange={handleChange}/>
        <button type="submit">Add Legend</button>
      </form>
      <p>{newLegend.name}</p>
    </div>
  );
}

export default NewLegendForm;

额外说明 #

• header→headers的拼写错误是问题根源，服务器无法识别请求体格式，因此忽略了提交的字段内容
• 添加响应解析和错误捕获，能帮助你快速定位后续可能出现的问题
• handleChange里的e.preventDefault()完全多余，input的change事件没有需要阻止的默认行为

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