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

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

✅ 正确做法：使用真实

 {
  e.preventDefault(); // ? 关键：阻止页面刷新和默认提交
  updateMember();
}}>
  
    {/* 所有 TextField 和 Button 保持不变 */}
     setName(e.target.value)}
      required
    />
     setEmail(e.target.value)}
      required
    />
     setPhone(e.target.value)}
      required
    />
     setMembershipID(e.target.value)}
      required
    />

    } 
      sx={{ mt: 2 }}
    >
      Update Member
    
  

✅ 优势：语义清晰、事件可靠、符合 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 表单处理中最易忽视却影响最广的基础要点。