当前位置：首页 > 文章列表 > 文章 > 前端 > AxiosPUT请求未发送解决方法

AxiosPUT请求未发送解决方法

2026-01-31 17:18:42 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《Axios PUT 请求未发送怎么解决》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

如何解决 Axios PUT 请求未发出的问题

本文详解 React 中因误用 `` 组件替代 `

在使用 MERN 栈开发 CRUD 应用时，你可能会遇到这样的现象：Axios 的 PUT 请求看似执行了（控制台打印了 URL 和参数），但实际请求从未离开浏览器——服务端日志无记录，Network 面板中看不到该请求，error.request 显示一个空的 XMLHttpRequest 对象（status: 0, statusText: ""）。这通常不是后端或 Axios 配置问题，而是前端表单提交逻辑存在关键错误。

? 根本原因：无法响应 onSubmit 事件

你当前代码中将 onSubmit={updateMember} 直接绑定在 MUI 的组件上：

<Box onSubmit={updateMember} component="form" /* ... */>

⚠️ 这是无效的！尽管 component="form" 让 Box 渲染为

标签，但 React 不会将原生 DOM 事件（如 onSubmit）自动委托给 component 渲染的真实元素。本身并非原生，它不支持 onSubmit 作为 React 事件处理器——该 prop 被静默忽略。因此点击 Submit 按钮后，浏览器执行的是原生表单提交（默认行为）：向当前 URL 发起 GET 请求，导致页面刷新，Axios 请求根本来不及发送。

这也是为什么你在 Thunder Client 或 Postman 中请求能成功：它们不涉及 HTML 表单生命周期，而你的前端代码实际上从未真正调用 updateMember() 函数。

✅ 正确做法：使用真实元素并阻止默认提交

将替换为语义化标签，并在 onSubmit 处理器中显式调用 event.preventDefault()：

<form onSubmit={(e) => {
  e.preventDefault(); // ? 关键：阻止页面刷新和默认提交
  updateMember();
}}>
  <Box
    sx={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      '& .MuiTextField-root': { m: 1, width: '25ch' },
    }}
  >
    {/* 所有 TextField 和 Button 保持不变 */}
    <TextField
      label="Name"
      value={name}
      onChange={(e) => setName(e.target.value)}
      required
    />
    <TextField
      label="Email"
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      required
    />
    <TextField
      label="Phone"
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      required
    />
    <TextField
      label="MembershipID"
      value={membershipID}
      onChange={(e) => setMembershipID(e.target.value)}
      required
    />

    <Button 
      type="submit" 
      size="large" 
      variant="contained" 
      color="success" 
      endIcon={<SendIcon />} 
      sx={{ mt: 2 }}
    >
      Update Member
    </Button>
  </Box>
</form>

✅ 优势：语义清晰、事件可靠、符合 Web 标准；MUI 的 Box 可继续用于样式布局，但表单交互必须交由原生管理。

? 补充优化建议

添加加载状态与错误反馈：避免重复提交，提升用户体验

const [loading, setLoading] = useState(false);
const updateMember = async () => {
  setLoading(true);
  try {
    await axios.put(`http://localhost:5000/members/${membershipID}`, { name, email, phone });
    navigate('/members');
  } catch (error) {
    console.error('Update failed:', error);
    alert(`Update failed: ${error.response?.data?.message || 'Unknown error'}`);
  } finally {
    setLoading(false);
  }
};

并禁用按钮：

验证必填字段：在 e.preventDefault() 后增加客户端校验

if (!name || !email || !phone || !membershipID) {
  alert('All fields are required.');
  return;
}

检查 CORS 与代理（开发环境）：若修复后仍报 CORS 错误，请确保 Express 后端已配置 cors() 中间件，或在 package.json 中添加 "proxy": "http://localhost:5000"，然后改用相对路径：
```
axios.put(`/members/${membershipID}`, { name, email, phone })
```

✅ 总结

问题现象	原因	解决方案
PUT 请求未发出，error.request 为空对象	无效，触发原生表单刷新	改用 + e.preventDefault()
请求 URL 正确但服务端无日志	浏览器未执行 JS，页面已跳转	确保 preventDefault 在异步函数调用前执行
控制台显示 status: 0	典型的网络中断（如页面刷新、跨域拦截、请求被取消）	优先排查表单事件绑定与默认行为

只要正确绑定表单事件并阻止默认提交，Axios PUT 请求即可稳定抵达服务器——这是 React 表单处理中最易忽视却影响最广的基础要点。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。