Redux Toolkit Mutation传参异常：后端接收数据为undefined的解决方法

问题根源 #

RTK Query的builder.mutation中，query函数仅支持接收单个参数。你当前调用updateproductapi时传入了product.product_id和formdata两个参数，导致第二个参数formdata根本没有被query函数正确捕获，最终后端接收到的请求体为空。

解决步骤 #

1. 将多参数包装为单个对象：在组件调用mutation时，把需要传递的所有参数（ID和FormData）合并成一个对象传入。
2. 修改Query函数解构参数：在ApiSlice的query配置中，通过解构这个对象来获取所需的参数值。

修改后代码示例 #

组件代码

const [ updateproductapi ] = useUpdateProductMutation()
// 确保正确实例化FormData
const formdata = new FormData();
formdata.append("product_name", product.product_name);
formdata.append("product_price", product.product_price);
formdata.append("file", imagefile)

// 以单个对象形式传递参数
updateproductapi({ productId: product.product_id, formData: formdata })

ApiSlice代码

updateProduct: builder.mutation({
    query: ({ productId, formData }) => ({
        url: `/product/${productId}`,
        method: 'PUT',
        body: formData,
    }),
    invalidatesTags: ['Productmgmt']
}),

额外注意事项 #

• 后端必须配置处理multipart/form-data的中间件（比如Express框架下的multer），因为你传递的是FormData格式数据，而非普通JSON。如果后端仅配置了JSON解析中间件，同样会出现req.body为空的情况。
• 确认组件中formdata是已正确初始化的FormData实例，避免因未实例化导致的数据传递失败。

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