Redux Toolkit中PUT/Update接口失效：前端数据传入Slice为undefined

系统中POST创建、GET查看接口正常，但PUT更新发票VIN的接口无法运行。前端通过Redux-Toolkit的useUpdateSavedInvoiceByIdMutation发起请求时，数据传入invoiceApiSlice后显示为undefined。

1. 核心问题：RTK Query参数不匹配 #

前端组件调用mutation时传入的参数是{vinNumber, invoiceID}，但invoiceApiSlice的query函数里却试图解构{data, invoiceID}——根本没有传data字段，导致data必然为undefined。

修复代码： #

调整invoiceApiSlice的参数解构逻辑，直接使用传入的字段：

// invoiceApiSlice.js
import { apiSlice } from "../../redux/api/apiSlice";
import { USERS_URL } from "../constants";

export const invoiceApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    updateSavedInvoiceById: builder.mutation({
      query: ({ vinNumber, invoiceID }) => ({
        url: `${USERS_URL}/invoice/savedInvoice/edit/${invoiceID}`,
        method: "PUT",
        body: { vinNumber }, // 将VIN包装为请求体
      }),
    }),
  }),
});

export const { useUpdateSavedInvoiceByIdMutation } = invoiceApiSlice;

2. 其他潜在问题修复 #

（1）VIN编号类型不匹配 #

Invoice Model中vinNumber定义为Number类型，但实际VIN可能包含字母，存为数字会丢失信息或报错，改为字符串类型：

// Invoice Model.js
import mongoose from "mongoose";
const { ObjectId } = mongoose.Schema;

const invoiceSchema = mongoose.Schema(
  {
    vinNumber: {
      type: String, // 改为String类型
      trim: true,
    },
  },
  { timestamps: true }
);

const Invoice = mongoose.model("invoice", invoiceSchema);
export default Invoice;

（2）Controller用户ID未定义 #

Controller中_id变量无来源，需从请求中获取当前用户ID（假设已通过身份验证解析到req.user）：

// Invoice Controller.js
static updateSavedInvoiceById = asyncHandler(async (req, res) => {
  try {
    const invoice = await Invoice.findById(req.params.id);
    // 从req.user获取当前用户ID
    const user = await UserModel.findById(req.user._id); 
    if (!invoice) {
      return res.status(404).json({ error: "发票不存在" });
    }

    invoice.vinNumber = req.body.vinNumber;
    const latestInvoice = await invoice.save();
    
    // 避免重复添加发票记录
    if (!user.invoiceCreatedByThisUser.includes(latestInvoice._id)) {
      user.invoiceCreatedByThisUser.push(latestInvoice);
      await user.save();
    }
    
    res.status(200).json(latestInvoice);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "更新失败：" + error.message });
  }
});

（3）Store配置冗余 #

invoiceApiSlice是注入到apiSlice中的，无需单独添加reducer和middleware，避免冲突：

// store.js
export const store = configureStore({
  reducer: {
    auth: authReducer,
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

setupListeners(store.dispatch);
export default store;

3. 调试建议 #

• 在invoiceApiSlice的query函数中添加日志，确认参数是否正确接收：

query: ({ vinNumber, invoiceID }) => {
  console.log("接收参数：", vinNumber, invoiceID);
  return {
    url: `${USERS_URL}/invoice/savedInvoice/edit/${invoiceID}`,
    method: "PUT",
    body: { vinNumber },
  };
},

• 打开浏览器开发者工具Network标签，查看PUT请求的Payload是否包含vinNumber字段。

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