AxiosPUT请求未发送解决方法

这也是为什么你在 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 })

✅ 总结

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

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