如何将数据传递给redux工具包mutation

Question

在组件中，

const [ updateproductapi ] = useUpdateProductMutation()
formdata.append("product_name", product.product_name);
formdata.append("product_price", product.product_price);
formdata.append("file", imagefile)

updateproductapi(product.product_id, formdata)

在 ApiSlice 中，

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

当数据发送到后端程序时，我的后端程序将变得不确定。我将原始数据发送到后端，req.body 将显示数据。 如何解决我的问题。 非常感谢。

Answer 1

问题

query

仅消耗一个参数。

查询签名

export type query = <QueryArg>(
  arg: QueryArg,
) => string | Record<string, unknown>

// with `fetchBaseQuery`
export type query = <QueryArg>(arg: QueryArg) => string | FetchArgs

你试图传递两个参数：

query: (product_id, formdata ) => ({
  url: `/product/${product_id}`,
  method: 'PUT',
  body: formdata,
}),

const [updateProductApi] = useUpdateProductMutation();
formdata.append("product_name", product.product_name);
formdata.append("product_price", product.product_price);
formdata.append("file", imagefile);

updateProductApi(product.product_id, formdata);

这会导致

formdata

在突变请求中未定义。

解决方案建议

更新端点逻辑以使用具有您需要的所有数据属性的单个参数对象。

示例：

query: ({ productId, formData }) => ({
  url: `/product/${productId}`,
  method: 'PUT',
  body: formData,
}),

const [updateProductApi] = useUpdateProductMutation();
formData.append("product_name", product.product_name);
formData.append("product_price", product.product_price);
formData.append("file", imagefile);

updateProductApi({
  productId: product.product_id,
  formData
});

您甚至可能只想传递整个

product

对象并在查询函数中组成请求和有效负载。这简化了您的 API 并减少了

useUpdateProductMutation

调用者的工作量。

示例：

query: (product) => {
  const formData = new FormData();

  formData.append("product_name", product.product_name);
  formData.append("product_price", product.product_price);
  formData.append("file", imagefile);

  return {
    url: `/product/${product.product_id}`,
    method: 'PUT',
    body: formData,
  };
},

const [updateProductApi] = useUpdateProductMutation();

updateProductApi(product);