如何在React Hook Form中仅提交变更的数据？

React Hook Form提供了直接的API来跟踪表单中变更的字段，以下是两种实用的实现方式：

方法一：利用dirtyFields和getValues #

React Hook Form会自动维护dirtyFields对象，其中记录了每个字段是否被修改过。我们可以结合getValues获取变更字段的当前值，组装成仅包含变更内容的对象：

import { useForm } from "react-hook-form";

function EditForm() {
  const { register, handleSubmit, dirtyFields, getValues } = useForm({
    defaultValues: {
      name: "",
      email: "",
      age: ""
      // 你的其他表单字段
    }
  });

  const onSubmit = () => {
    // 筛选并组装变更字段
    const changedFields = Object.fromEntries(
      Object.entries(dirtyFields)
        .filter(([_, isDirty]) => isDirty)
        .map(([fieldName]) => [fieldName, getValues(fieldName)])
    );

    // 调用你的editData发送请求
    editData(changedFields);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="姓名" />
      <input {...register("email")} type="email" placeholder="邮箱" />
      <input {...register("age")} type="number" placeholder="年龄" />
      <button type="submit">保存修改</button>
    </form>
  );
}

方法二：对比默认值与当前值 #

如果需要更灵活的对比逻辑（比如处理复杂类型），可以通过watch获取当前所有字段值，再与初始的默认值对比：

import { useForm, watch } from "react-hook-form";
// 处理复杂类型对比需引入深度比较工具，比如lodash的isEqual
import { isEqual } from "lodash";

function EditForm() {
  const formConfig = {
    defaultValues: {
      name: "张三",
      email: "zhangsan@example.com",
      preferences: {
        receiveNews: true,
        theme: "light"
      }
    }
  };
  const { register, handleSubmit, getValues } = useForm(formConfig);
  const currentValues = watch();
  const defaultValues = formConfig.defaultValues;

  const onSubmit = () => {
    const changedFields = {};
    Object.keys(defaultValues).forEach(fieldName => {
      // 深度对比字段值是否变更
      if (!isEqual(currentValues[fieldName], defaultValues[fieldName])) {
        changedFields[fieldName] = currentValues[fieldName];
      }
    });

    editData(changedFields);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 对应表单元素 */}
    </form>
  );
}

注意事项 #

• 对于基本类型（字符串、数字、布尔值），直接用!==对比即可；如果是对象、数组等复杂类型，必须使用深度比较（如lodash的isEqual），否则会因为引用不同误判为变更。
• 如果表单字段是动态生成的，确保defaultValues包含所有动态字段的初始值，否则dirtyFields和对比逻辑会失效。

内容的提问来源于stack exchange，提问作者Duy Tịnh