如何在使用RTK查询更新记录的请求中设置主体?

Question

在EditEmployee组件编辑后，当我点击"保存更改"按钮updateEmployee方法由于某种原因没有在PUT请求中发送正文。

我在这里做错了什么?

EditEmployee.js

import React, { useState } from 'react';
import { useUpdateEmployeeMutation } from "./employeesApiSlice";
function EditEmployee(props) {
const [updateEmployee] = useUpdateEmployeeMutation();

const [updatedFirstName, setUpdatedFirstName] = useState(props.employee.firstName);
const [updatedLastName, setUpdatedLastName] = useState(props.employee.lastName);
const [updatedPosition, setUpdatedPosition] = useState(props.employee.position);
const jobPositions = ['Labor', 'Worker', 'Supervisor', 'Manager', 'HR', 'Director', 'CEO']
.map((jobPosition, i) => (
<Col key={i}>
<Form.Group className="mb-3" controlId={jobPosition.toLowerCase()}>
<Form.Check
type="radio"
name="position"
label={jobPosition}
value={jobPosition.toLowerCase()}
defaultChecked={props.employee.position.toLowerCase() === jobPosition.toLowerCase()}
onChange={e => setUpdatedPosition(e.target.value)}
/>
</Form.Group>
</Col>
));
function handleSaveChanges() {
const employee = {
firstName: updatedFirstName,
lastName: updatedLastName,
position: updatedPosition
}
updateEmployee(props.employee.id, employee)
}
return (
<>
<Form>
<Form.Group className="mb-3" controlId="formFirstName">
<Form.Label>First Name</Form.Label>
<Form.Control type="text" defaultValue={updatedFirstName} onChange={e => setUpdatedFirstName(e.target.value)} />
</Form.Group>
<Form.Group className="mb-3" controlId="formLastName">
<Form.Label>Last Name</Form.Label>
<Form.Control type="text" defaultValue={updatedLastName} onChange={e => setUpdatedLastName(e.target.value)} />
</Form.Group>
<Container>
<Row>
{jobPositions}
</Row>
</Container>
</Form>

<Button variant="success" onClick={() => handleSaveChanges()}>
Save Changes
</Button>
</>
);
}
export default EditEmployee;

employeeApiSlice.js

import { apiSlice } from "../../app/api/apiSlice";
export const employeesApiSlice = apiSlice.injectEndpoints({
tagTypes: ['Employees'],
endpoints: (builder) => ({
getEmployees: builder.query({
query: () => ({
url:'/employee'
}),
providesTags:['Employees'],
keepUnusedDataFor: 2
}),
updateEmployee: builder.mutation({
query: (id, employee) => ({
url: `/employee/${id}`,
method: 'PUT',
body: employee
}),
invalidatesTags: ['Employees']
}),
addEmployee: builder.mutation({
query: (employee) => ({
url: `/employee`,
method: 'POST',
body: employee
}),
invalidatesTags: ['Employees']
})
}),
});
export const {
useGetEmployeesQuery,
useUpdateEmployeeMutation,
useAddEmployeeMutation
} = employeesApiSlice;

Answer 1

端点的query回调只接受一个参数。

参见:突变端点定义

export type MutationDefinition<
QueryArg,
BaseQuery extends BaseQueryFn,
TagTypes extends string,
ResultType,
ReducerPath extends string = string,
Context = Record<string, any>
> = {
query(arg: QueryArg): BaseQueryArg<BaseQuery> <---- Single Argument
/* either `query` or `queryFn` can be present, but not both simultaneously */
queryFn(
arg: QueryArg,
api: BaseQueryApi,
extraOptions: BaseQueryExtraOptions<BaseQuery>,
baseQuery: (arg: Parameters<BaseQuery>[0]) => ReturnType<BaseQuery>
): MaybePromise<QueryReturnValue<ResultType, BaseQueryError<BaseQuery>>>
/* transformResponse only available with `query`, not `queryFn` */
transformResponse?(
baseQueryReturnValue: BaseQueryResult<BaseQuery>,
meta: BaseQueryMeta<BaseQuery>,
arg: QueryArg
): ResultType | Promise<ResultType>
/* transformErrorResponse only available with `query`, not `queryFn` */
transformErrorResponse?(
baseQueryReturnValue: BaseQueryError<BaseQuery>,
meta: BaseQueryMeta<BaseQuery>,
arg: QueryArg
): unknown
extraOptions?: BaseQueryExtraOptions<BaseQuery>
invalidatesTags?: ResultDescription<TagTypes, ResultType, QueryArg>
onQueryStarted?(
arg: QueryArg,
{
dispatch,
getState,
extra,
requestId,
queryFulfilled,
getCacheEntry,
}: MutationLifecycleApi
): Promise<void>
onCacheEntryAdded?(
arg: QueryArg,
{
dispatch,
getState,
extra,
requestId,
cacheEntryRemoved,
cacheDataLoaded,
getCacheEntry,
}: MutationCacheLifecycleApi
): Promise<void>
}

如果你需要传递多个值，它们应该打包在一个对象中。

的例子:

updateEmployee: builder.mutation({
query: ({ id, employee }) => ({
url: `/employee/${id}`,
method: 'PUT',
body: employee
}),
invalidatesTags: ['Employees']
}),

function handleSaveChanges() {
const employee = {
firstName: updatedFirstName,
lastName: updatedLastName,
position: updatedPosition
};
updateEmployee({ id: props.employee.id, employee });
}