React-Hook-Form与React-Select集成问题：二次修改选项后表单未标记为Dirty的修复咨询

这个问题的核心原因是表单字段类型不匹配，导致React-Hook-Form内部的状态对比逻辑出现异常。让我拆解一下问题并给出修复方案：

问题根源 #

你定义的Data类型中name是string类型，但实际通过React-Select的onChange传入的是完整的选项对象（比如{value: "joe", label: "Joe"}）。这种类型不匹配会让React-Hook-Form的状态管理混乱：

1. 首次提交后调用reset(getValues())时，getValues()返回的name是选项对象，覆盖了原本的string类型默认值
2. 后续再次修改React-Select选项时，React-Hook-Form无法正确对比新旧值的差异（因为类型不一致或对象引用对比失效），所以不会标记表单为Dirty状态。

修复方案 #

我们需要让表单字段的类型和React-Select的输出保持一致，最合理的方式是让name存储选项的value字符串（符合你定义的Data类型），同时在Controller中做值的转换：

import { useForm, Controller } from "react-hook-form";
import Select from "react-select";

const options = [
  { value: "joe", label: "Joe" },
  { value: "jack", label: "Jack" },
  { value: "averell", label: "Averell" }
];

type Data = { name: string; surname: string };

export default function Form({ defaultValues, onSend }: { defaultValues: Data; onSend: (data: Data) => void; }) {
  const {
    register,
    handleSubmit,
    reset,
    getValues,
    control,
    formState: { isValid, isDirty }
  } = useForm({ mode: "onChange", defaultValues });

  const onSubmit = (data: Data) => {
    onSend(data);
    reset(getValues());
    console.log("data sent!", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="name"
        render={({ field }) => (
          <Select
            // 根据表单中的字符串值，匹配对应的选项对象
            value={options.find(opt => opt.value === field.value)}
            options={options}
            // 将选中的选项对象转换为value字符串传给表单
            onChange={(selectedOption) => field.onChange(selectedOption?.value)}
          />
        )}
      />
      <input placeholder="surname" {...register("surname")}/>
      <button type="submit" disabled={!isValid || !isDirty}>
        submit
      </button>
    </form>
  );
}

为什么这个方案有效？ #

1. 现在name字段始终存储的是字符串类型（比如"joe"），完全匹配Data类型定义，避免了类型混乱
2. React-Select的value通过options.find从表单字符串值转换为对应的选项对象，保证了UI显示正确
3. 重置表单时，reset(getValues())传入的是符合类型的字符串值，React-Hook-Form能正确对比后续的变更，标记表单为Dirty状态

如果你确实需要存储完整的选项对象，可以修改Data类型为{ name: { value: string; label: string }; surname: string }，但此时需要注意：React-Hook-Form默认使用引用对比对象，所以重置后如果新选中的选项是新创建的对象（即使内容相同），也能正确标记Dirty。不过这种方式不如存储字符串简洁，建议优先使用前者。

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