React中PUT请求（CRUD编辑操作）无法向API传递数据的问题排查求助

嘿，我明白你刚用React两个月，在CRUD的编辑功能上卡壳的 frustration！既然API在Postman里能正常工作，那问题肯定出在React的表单提交逻辑上，咱们一步步拆解修复：

核心问题：未阻止表单默认提交行为 #

两种尝试的共同问题是表单提交时没有阻止默认的页面刷新——浏览器默认会在表单提交时刷新页面，导致你的fetch请求还没完成就被中断了，自然没法把数据发送到服务器。

第一种尝试（useRef实现）的修复 #

用useRef获取输入值本身没问题，但要加上e.preventDefault()，同时建议给输入框设置默认值（显示用户当前数据），优化编辑体验：

const usernameEl = React.useRef(null)
const timezoneEl = React.useRef(null)

const handleEditProfile = async (e) => {
  e.preventDefault(); // 关键：阻止页面刷新，让请求能完整发送
  const creds = {
    user: {
      username: usernameEl.current.value,
      timezone: timezoneEl.current.value
    }
  };
  try {
    const config = {
      method: 'PUT',
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "Authorization": `Bearer ${Cookies.get('token')}`
      },
      body: JSON.stringify(creds)
    };
    const res = await fetch(`${process.env.REACT_APP_API_URL}api/users/${id}`, config);
    // 手动处理HTTP错误状态码（fetch仅在网络失败时抛错）
    if (!res.ok) throw new Error(`请求失败：${res.status}`);
    const user = await res.json();
    console.log('编辑成功：', user);
    // 这里可以加成功后的逻辑，比如跳转、提示用户等
  } catch(err) {
    console.error('编辑出错：', err);
  }
}

return (
  <form onSubmit={handleEditProfile} className="form">
    <div className="input-group">
      <label htmlFor="username">username</label>
      {/* 加上defaultValue显示当前用户的用户名 */}
      <input type="text" id="username" ref={usernameEl} defaultValue={currentUser?.username}/>
    </div>
    <div className="input-group">
      <label htmlFor="timezone">timezone</label>
      <input type="text" id="timezone" ref={timezoneEl} defaultValue={currentUser?.timezone}/>
    </div>
    <div className="input-group">
      <SubmitButtonComponent type="submit"> Submit </SubmitButtonComponent>
    </div>
  </form>
)

第二种尝试（useState实现）的修复 #

用useState管理输入值是更推荐的受控组件写法，同样要加上e.preventDefault()，还要调整try/catch的位置（要包裹整个请求逻辑，才能捕获请求错误）：

// 初始化时直接填入用户当前数据
const [username, setUsername] = useState(currentUser?.username || '')
const [timezone, setTimezone] = useState(currentUser?.timezone || '')

const handleChangeUsername = e => {
  setUsername(e.target.value)
}
const handleChangeTimezone= e => {
  setTimezone(e.target.value)
}

const handleEditProfile = async (e) => {
  e.preventDefault(); // 关键：阻止页面刷新
  const creds = {
    user: {
      username: username,
      timezone: timezone
    }
  };
  try {
    const config = {
      method: 'PUT',
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "Authorization": `Bearer ${Cookies.get('token')}`
      },
      body: JSON.stringify(creds)
    };
    const res = await fetch(`${process.env.REACT_APP_API_URL}api/users/${id}`, config);
    if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
    const data = await res.json();
    console.log('编辑成功：', data);
    // 成功后可以选择清空输入，或者保持当前值
    // setUsername('')
    // setTimezone('')
  } catch(err) {
    console.error('编辑出错：', err);
  }
}

return (
  <form className="form" onSubmit={handleEditProfile}>
    <div className="input-group">
      <label htmlFor="username">username</label>
      {/* 受控组件要加上value属性绑定state */}
      <input type="text" id="username" value={username} onChange={handleChangeUsername}/>
    </div>
    <div className="input-group">
      <label htmlFor="timezone">timezone</label>
      <input type="text" id="timezone" value={timezone} onChange={handleChangeTimezone}/>
    </div>
    <SubmitButtonComponent type="submit"> Submit </SubmitButtonComponent>
  </form>
)

关于e.preventDefault()的错误说明 #

你尝试传值时出现错误，是因为对表单onSubmit事件的理解有误：

• 错误写法：onSubmit={(e)=>handleEditProfile(e.target.value)} 或 onSubmit={handleEditProfile(e)}
  • 前者的e.target是表单元素，e.target.value没有意义；后者会直接执行函数（而不是等待表单提交时执行），导致e未定义。
• 正确写法：onSubmit={handleEditProfile}（事件对象会自动传递给函数），或者onSubmit={(e) => handleEditProfile(e)}（手动传递事件对象）

额外小建议 #

1. 可以在请求发送时添加加载状态，比如禁用提交按钮，避免用户重复提交；
2. 给输入框加上验证逻辑（比如非空判断），再发送请求；
3. 成功后可以添加用户提示（比如toast），提升交互体验。

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