如何使用“react-query”突变正确提交“react-hook-form”？

Question

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

目前我的解决方法如下：

const { mutate } = useMutation(...);

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

然后传递update到methods.handleSubmit来自表单。

有人可以分享一些关于这个主题的经验吗？谢谢！

Answer 1

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

看起来这是react-hooks-form的要求？

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

除此之外，useMutation还返回isLoading突变的状态，因此您可以让react-query处理该状态（我不知道react-hooks-form，所以不确定这是否可能）。