如何结合react-query的mutation正确提交react-hook-form表单？

我之前在项目里也碰到过完全一样的需求！你的临时方案其实是可行的，但React Query本身提供了更优雅的方式来适配React Hook Form的isSubmitting状态，不用自己手动包装Promise。

核心解决方案：使用mutateAsync代替mutate #

React Query的useMutation钩子除了mutate方法，还提供了**mutateAsync**——它会直接返回一个Promise，成功时resolve请求结果，失败时reject错误，完美契合React Hook Form的handleSubmit对返回值的要求（因为handleSubmit会根据Promise的状态自动管理isSubmitting）。

直接看代码示例：

import { useMutation } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';

function YourForm() {
  const { register, handleSubmit } = useForm();
  // 初始化mutation时获取mutateAsync
  const { mutateAsync, isLoading } = useMutation({
    mutationFn: (formData) => {
      // 你的异步提交逻辑，比如调用API
      return fetch('/api/update', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: { 'Content-Type': 'application/json' },
      });
    },
  });

  // 直接把mutateAsync传给handleSubmit即可
  const onSubmit = handleSubmit((formData) => mutateAsync(formData));

  return (
    <form onSubmit={onSubmit}>
      {/* 你的表单控件 */}
      <input {...register('name')} placeholder="输入名称" />
      {/* 提交按钮根据状态禁用/显示加载文本 */}
      <button type="submit" disabled={isLoading}>
        {isLoading ? '提交中...' : '提交'}
      </button>
    </form>
  );
}

关于你现有方案的补充 #

如果因为某些原因你必须使用mutate而不是mutateAsync，你的包装思路是完全正确的，还可以稍微简化一下写法：

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

这种写法和你的原代码功能一致，但更简洁紧凑。

额外小技巧 #

你还可以结合React Query的isLoading状态和React Hook Form的isSubmitting状态（两者其实会同步变化），不过通常只用其中一个就足够控制加载状态的展示了，按需选择即可。

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