React+Redux项目axios.put提交FormData时req.params.id未定义问题解决

基于React+Redux开发商品编辑功能，使用FormData封装参数提交axios.put请求更新商品数据时，出现前后端调用兼容问题：

• 后端默认从req.params.id获取商品ID时：
  • Postman调用后端更新接口一切正常
  • 前端调用时报错：Cast to ObjectId failed for value "undefined" (type string) at path "_id" for model、Cannot read property 'path' of undefined
• 修改后端获取ID逻辑为从req.body.id取值时：
  • 前端调用正常
  • Postman调用失败

Postman调试PUT类RESTful接口时，默认会将资源ID直接拼接在URL路径中，不会在请求Body中额外传递ID参数；而前端之前仅将商品ID存入FormData中，未同步拼接到请求URL路径，导致后端从URL参数取值时拿到的是undefined。

无需修改后端原有接口逻辑，仅调整前端请求逻辑即可实现两端兼容：

1. 前端封装FormData时，仍将商品ID作为字段存入FormData实例
2. 在Redux的Action层发送请求前，先从FormData中取出ID值，拼接进axios.put的请求URL路径

示例代码如下：

// 商品编辑页面封装FormData示例
const formData = new FormData()
formData.append('id', currentProductId) // 存入商品ID
formData.append('name', productName)
formData.append('cover', coverFile) // 支持文件类参数上传

// Redux Action层发送请求示例
export const updateProduct = (formData) => async (dispatch) => {
  // 从FormData中取出ID拼接URL
  const productId = formData.get('id')
  const response = await axios.put(`/api/products/${productId}`, formData)
  
  // 后续Redux状态更新逻辑
  dispatch({
    type: 'UPDATE_PRODUCT_SUCCESS',
    payload: response.data
  })
}

修改后既符合RESTful接口设计规范，也能同时兼容前端业务调用和Postman调试场景

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