React编辑联系人表单提交时出现Axios 404错误求助

嘿，我看了你的代码，发现导致404错误的问题很明确啦——你的前端PUT请求没有带上联系人的ID，和后端的路由不匹配！下面帮你一步步解决：

• 问题核心：后端路由要求URL带ID，但前端请求没传
  你的后端PUT路由定义是router.put('/:id', ...)，这意味着请求URL必须包含联系人的ID（比如/api/contacts/60d21b4667d0d8992e610c85），后端才能通过req.params.id找到要更新的联系人。但你前端的Axios请求写的是：

  axios.put('http://localhost:8082/api/contacts', data)
  

  这个URL没有拼接ID，后端找不到对应的路由，所以返回404错误。

• 解决方法：修改前端PUT请求的URL
  你已经通过useParams()拿到了联系人的id，直接把它拼到请求URL里就行：

  axios.put(`http://localhost:8082/api/contacts/${id}`, data)
  

  这样后端就能正确识别到要更新的联系人，不会再返回404了。

• 额外的小问题修正：表单字段绑定错误
  我还注意到一个细节错误：你的Relationship输入框绑定的是update.birthday，但你的state里并没有birthday字段，应该改成update.relationship，不然这个字段的值会一直是undefined：

  <input name="relationship" value={update.relationship} onClick={onClick} onChange={onChange} type="date" />
  

• 优化建议：替换window.location.reload()
  你当前的cancelContact函数用了window.location.reload()刷新页面，其实用React Router的navigate更符合单页应用的逻辑，比如返回上一页或者跳转到联系人列表：

  const cancelContact = () => {
    navigate(-1); // 返回上一页
    // 或者用 navigate('/contacts'); 直接跳转到联系人列表页面
  };
  

改完这些之后，你的编辑联系人功能应该就能正常工作啦！

备注：内容来源于stack exchange，提问作者Harshini V