react-hook-form中shouldDirty未触发重渲染，复选框状态异常求助

你遇到的核心问题是同时使用了register和手动的setValue、checked绑定，导致表单状态与组件UI状态冲突：

• register本身已自动处理Checkbox的状态更新与表单字段同步
• 手动添加的onChange+setValue会和register的内置逻辑产生竞争，且getValues是同步获取表单值，无法及时响应react-hook-form的异步状态更新，导致Checkbox的checked状态无法正确回显
• shouldDirty: true仅标记字段为脏状态，不会直接触发组件重渲染，你需要订阅表单值的变化来更新UI

推荐两种可行的修复方式：

方式一：简化register用法，使用watch订阅字段变化 #

直接让register接管Checkbox的状态管理，用watch监听字段值变化，替代getValues做UI条件渲染：

import { useForm } from "react-hook-form";
import { FormControlLabel, Checkbox, Typography } from "@mui/material";

export default function YourComponent() {
  const {
    register,
    watch,
    formState: { isDirty, dirtyFields },
  } = useForm({
    defaultValues: { // 必须设置默认值，保证初始状态正确
      first: false
    }
  });
  const onSubmit = (data: any) => {
    console.log("Data == ", data);
  };

  // 订阅字段变化，自动触发重渲染
  const isFirstChecked = watch("first");

  return (
    <>
      <FormControlLabel
        label={"First Check"}
        control={
          <Checkbox
            {...register("first")} // 由register完全接管状态
          />
        }
      />
      {isFirstChecked && <Typography>Comment1</Typography>}
    </>
  );
}

方式二：使用Controller封装Material UI Checkbox（官方推荐） #

针对Material UI这类第三方受控组件，react-hook-form官方推荐用Controller封装，能更稳定地同步表单状态与组件UI：

import { useForm, Controller } from "react-hook-form";
import { FormControlLabel, Checkbox, Typography } from "@mui/material";

export default function YourComponent() {
  const {
    control,
    watch,
    formState: { isDirty, dirtyFields },
  } = useForm({
    defaultValues: {
      first: false
    }
  });
  const onSubmit = (data: any) => {
    console.log("Data == ", data);
  };

  const isFirstChecked = watch("first");

  return (
    <>
      <FormControlLabel
        label={"First Check"}
        control={
          <Controller
            name="first"
            control={control}
            render={({ field }) => (
              <Checkbox
                {...field}
                checked={field.value} // 由Controller同步状态
              />
            )}
          />
        }
      />
      {isFirstChecked && <Typography>Comment1</Typography>}
    </>
  );
}

• 必须设置defaultValues：react-hook-form依赖初始值跟踪状态变化，缺失会导致状态异常
• 避免混用register与手动setValue/checked绑定：两种方式二选一，否则会引发状态不同步
• watch与getValues的区别：watch是订阅式，字段变化时自动触发重渲染；getValues是同步取值，不会触发重渲染，不适合做条件渲染判断

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