React Hook Form动态关联字段：defaultValues/values/setValue用法咨询

关于修改defaultValues的问题 #

• 技术上可以通过监听Field 1的值去更新defaultValues，但绝对不推荐这么做。defaultValues的设计定位就是表单初始化时的基准值，React Hook Form内部会依赖它完成重置、初始化校验等逻辑，后续修改它不会自动同步到表单的实时状态values里，还得额外处理同步逻辑，反而增加复杂度。
• 初始加载后修改defaultValues违背了它的设计初衷：调用reset()时，表单会重置到修改后的defaultValues，和预期的初始状态不符；而且这种修改不会触发表单响应式更新，容易引发状态不一致的bug。

关于values的实际用法 #

values是React Hook Form维护的表单实时状态集合，核心作用是读取当前表单的所有字段值。比如可以用它做条件渲染（根据Field 1的值决定Field 2是否显示）、联动逻辑的判断依据，或者在提交前做数据预处理。它是只读的状态集合，不能直接修改。

动态关联字段的推荐处理方式 #

最稳妥的方案是用setValue配合watch（或useWatch）监听字段变化，这也是官方推荐的做法：

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

function LinkedFieldsForm() {
  const { register, setValue, control } = useForm({
    defaultValues: {
      field1: "",
      field2: ""
    }
  });

  // 用useWatch监听单个字段，性能更优（适合字段较多的场景）
  const field1Value = useWatch({
    control,
    name: "field1"
  });

  // 处理字段联动逻辑
  React.useEffect(() => {
    if (field1Value === "ABC") {
      setValue("field2", "ABC 1 Updated", {
        shouldDirty: true, // 标记字段为已修改，可选
        shouldValidate: false // 根据需求决定是否触发校验
      });
    }
  }, [field1Value, setValue]);

  return (
    <form>
      <select {...register("field1")}>
        <option value="">请选择</option>
        <option value="ABC">ABC</option>
        <option value="DEF">DEF</option>
      </select>
      <input {...register("field2")} />
    </form>
  );
}

为什么选setValue？ #

• 它是官方提供的标准状态修改方法，能保证表单内部状态的一致性；
• 可通过配置参数灵活控制修改后的行为（比如是否触发校验、是否标记字段为已修改）；
• 修改后会自动同步到values，无需额外处理状态同步。

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