如何使用"react query"突变正确提交"react hook form"

Question

我将react-query与react-hook-form结合使用。为了激活表单上的isSubmitting道具并在提交时显示加载状态，mutate函数需要返回Promise，而不是直接使用mutate。

目前我的解决方法如下：

const { mutate } = useMutation(...);
const update = (data) => {
return new Promise((resolve, reject) => {
mutate(data, {
onSuccess: resolve,
onError: reject,
});
});
};

然后将CCD_ 5从形式传递到CCD_

有人能分享一下这个话题的经验吗？谢谢

Answer 1

为了激活表单上的isSubmission道具并在提交时显示加载状态，mutate函数需要返回Promise，而不是直接使用mutate。

这似乎是react hooks形式的要求？

您可以使用mutateAsync，它将返回一个Promise，并将其传递给react-hook-form

除此之外，useMutation还为您的突变返回一个isLoading状态，所以您可以让react查询来处理它(我不知道react钩子的形式，所以不确定这是否可能(。

Answer 2

只需使用以下代码

const {register , handleChange , Errors} = useForm();
const {mutation , mutationAsync , isLoading , isError} = useMutation(postData);
const Submit = (data) => {
mutateAsync(data);
}
return(
<form onSubmit={handleChange(Submit)}>
<input type="text" register={'name'}/>
</form>
)