RTK Query更新记录时请求体未发送的问题排查

核心错误 #

RTK Query 的 Mutation 端点的 query 函数仅支持接收单个参数，你在 employeeApiSlice.js 中给 updateEmployee 的 query 定义了两个参数（id 和 employee），导致第二个参数 employee 无法被正确识别，最终请求体为空。

修复步骤 #

1. 修改 employeeApiSlice.js 中的 updateEmployee Mutation

将 query 的参数改为单个对象，通过解构获取 id 和 employee：

updateEmployee: builder.mutation({
    // 改为接收单个对象参数并解构
    query: ({ id, employee }) => ({
        url: `/employee/${id}`,
        method: 'PUT',
        body: employee
    }),
    invalidatesTags: ['Employees']
}),

2. 修改 EditEmployee.js 中调用 updateEmployee 的方式

调用时传入包含 id 和 employee 的对象：

function handleSaveChanges() {
    const employee = {
        firstName: updatedFirstName,
        lastName: updatedLastName,
        position: updatedPosition
    }
    // 改为传入对象形式
    updateEmployee({ id: props.employee.id, employee })
}

额外优化建议 #

你的表单输入框使用了 defaultValue，虽然能通过 onChange 更新 state，但输入框的值不会和 state 双向绑定（比如手动修改 state 时输入框不会同步），建议改为使用 value 属性绑定 state：

// 原代码
<Form.Control type="text" defaultValue={updatedFirstName} onChange={e => setUpdatedFirstName(e.target.value)} />

// 修改后
<Form.Control type="text" value={updatedFirstName} onChange={e => setUpdatedFirstName(e.target.value)} />

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