使用RTK Query编辑产品时请求URL中id显示undefined的问题

问题根源 #

你传给editProduct mutation的是FormData实例，而RTK Query的query函数里尝试用data.id获取ID——但FormData不是普通JavaScript对象，无法通过点语法直接访问内部字段，所以data.id会返回undefined，导致URL错误。

虽然你用formDataToSend.entries()遍历能看到ID存在，但这是FormData的正确访问方式，点语法对它不生效。

解决方案 #

提供两种可行的修复方式：

方式1：在RTK Query中使用FormData的get()方法获取ID #

直接修改mutation的query逻辑，用FormData内置的get()方法读取ID：

editProduct: builder.mutation({
  query: (formData) => ({
    url: `/api/products/${formData.get('id')}`,
    method: "PUT",
    body: formData,
  }),
  invalidatesTags: ["Products"],
}),

方式2：拆分参数，单独传递ID（更清晰） #

调用mutation时，把ID和FormData分开传递，避免直接操作FormData的字段：

// 调用处代码修改
try {
  await editProduct({ 
    id: formData.id, 
    formData: formDataToSend 
  }).unwrap();
  toast.success("Product edited successfully");
  navigate("/admin/products");
} catch (error) {
  console.log(error);
  toast.error(error.data.message);
}

然后更新RTK Query的mutation定义：

editProduct: builder.mutation({
  query: ({ id, formData }) => ({
    url: `/api/products/${id}`,
    method: "PUT",
    body: formData,
  }),
  invalidatesTags: ["Products"],
}),

补充说明 #

• FormData的get()方法返回的是字符串类型，你的场景中ID是MongoDB的ObjectId（字符串格式），无需额外转换。
• 新增功能正常是因为新增接口不需要在URL中拼接ID，FormData的传递不受影响。

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