如何解决 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     />      ained"        color="success"        endicon={}        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 表单处理中最易忽视却影响最广的基础要点。