如何在请求中传递产品ID？Axios请求ID未定义问题排查

问题根源 #

Postman能正常调用PUT /:id/review接口，但前端用Axios发起请求时触发ID未定义错误，核心原因如下：

• 后端通过req.params.id从路由/:id/review提取产品ID
• 前端的submitHandler函数设计时需要接收id参数，但表单提交时并未传入该参数，导致请求URL变成/undefined/review，最终触发代理错误

修复步骤 #

1. 修正submitHandler函数定义
   确保函数接收id作为参数，用于构造正确的请求URL：

   const submitHandler = (productId, e) => {
     e.preventDefault();
     // 用传入的productId构造合法请求路径
     axios.put(`/${productId}/review`, yourReviewData)
       .then(response => {
         // 处理成功响应逻辑
       })
       .catch(error => {
         // 处理错误逻辑
       });
   };
   

2. 表单提交时传入有效ID
   在表单的onSubmit事件绑定中，传递实际的产品ID（可从组件props、状态或路由参数中获取）：

   // 假设productId是从组件props中获取的合法产品ID
   <form onSubmit={(e) => submitHandler(productId, e)}>
     {/* 评分表单内容 */}
   </form>
   

3. 验证请求URL合法性
   可以在Axios请求前打印URL，确认id已正确替换：

   console.log(`请求URL: /${productId}/review`); // 应输出类似 /123/review 的合法路径
   

内容的提问来源于stack exchange，提问作者Paras Chouhan