[英]Can't I put multiple data arguments in the react-query useMutation hook?
If you look at the guide, the useMutation Hook argument is structured like this.如果您查看指南,useMutation Hook 参数的结构是这样的。
const {
data,
error,
isError,
isIdle,
isLoading,
isPaused,
isSuccess,
mutate,
mutateAsync,
reset,
status,
} = useMutation(mutationFn, {
cacheTime,
mutationKey,
networkMode,
onError,
onMutate,
onSettled,
onSuccess,
retry,
retryDelay,
useErrorBoundary,
meta
})
The asynchronous axios function is structured like this:异步 axios function 的结构如下:
async function setSupplierRegister(
basic: Basic,
operator: Operator,
delivery: Delivery,
bank: Bank
): Promise<void> {
await axiosInstance.post("/register", {
basic: basic,
operator: operator,
delivery: delivery,
bank: bank,
});
}
The asynchronous function requires 4 arguments, but only 1 data value can be retrieved in the useMutation Hook argument.异步 function 需要 4 个 arguments,但在 useMutation Hook 参数中只能检索 1 个数据值。 Therefore, if you declare 4 arguments to useMutation, an error occurs.因此,如果声明4个arguments来使用Mutation,就会出现错误。
export function useRegister(): UseMutateFunction<
void,
unknown,
any,
unknown
> {
const { mutate } = useMutation(
// (basic: Basic, operator: Operator, delivery: Delivery, bank: Bank) => setSupplierRegister(basic, operator, delivery, bank), error
(data: any) => setSupplierRegister(data),
);
return mutate;
}
How should I handle it to declare 4 arguments in the useMutation function?我应该如何处理它在useMutation function中声明4 arguments?
You can add arguments in the array for example:您可以在数组中添加 arguments 例如:
export function useRegister(): UseMutateFunction<
void,
unknown,
any,
unknown
> {
const { mutate } = useMutation(
// (basic: Basic, operator: Operator, delivery: Delivery, bank: Bank) => setSupplierRegister(basic, operator, delivery, bank), error
([basic: Basic, operator: Operator, delivery: Delivery, bank: Bank]) => setSupplierRegister(basic, operator, delivery, bank),
);
return mutate;
}
and than call mutate:而不是调用突变:
mutate([basic, operator, delivery, bank])
The second option is to use an object but you will need to refactor the setSupplierRegister
function:第二个选项是使用 object,但您需要重构setSupplierRegister
function:
async function setSupplierRegister(data): Promise<void> {
await axiosInstance.post("/register", {
data
});
}
you can leave useMutation
as it is, and you call mutate like this:您可以保留useMutation
原样,然后像这样调用 mutate :
mutate({ basic, operator, delivery, bank })
In my opinion, the second approach is much cleaner and readable.在我看来,第二种方法更简洁易读。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.