React Hook Form 仅勾选复选框时复制表单输入值问题排查

异常的核心原因是值同步逻辑没有关联复选框的勾选状态，只要第一个表单的字段发生变化，就会无条件覆盖第二个表单的对应字段值，和你期望的受控逻辑不符。

• 首先给控制同步的复选框绑定独立的表单字段，通过watch接口获取该字段的实时布尔值
• 把同步逻辑封装在useEffect回调中，增加复选框状态判断，仅当复选框为勾选状态时才执行值同步
• 额外补充复选框状态切换的监听逻辑：当用户主动勾选复选框时，主动将第一个表单当前已填写的所有内容一次性同步到第二个表单，避免切换前已输入的内容无法同步

import { useForm } from 'react-hook-form';
import { useEffect } from 'react';

type FormValues = {
  contact: {
    name: string;
    phone: string;
  };
  sameAsContact: boolean;
  invoice: {
    name: string;
    phone: string;
  };
};

function ContactForm() {
  const { register, watch, setValue, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      contact: { name: '', phone: '' },
      sameAsContact: false,
      invoice: { name: '', phone: '' },
    }
  });

  // 监听需要用到的字段
  const [contactInfo, sameAsContact] = watch([
    'contact',
    'sameAsContact'
  ]);

  // 统一处理同步逻辑
  useEffect(() => {
    if (sameAsContact) {
      setValue('invoice.name', contactInfo.name);
      setValue('invoice.phone', contactInfo.phone);
    }
  }, [contactInfo, sameAsContact, setValue]);

  // 提交逻辑、表单UI省略
  return <></>;
}

不要在组件渲染函数中直接执行setValue操作，该操作会触发表单状态更新，进而触发组件重渲染，不加判断的话会形成死循环或者异常值覆盖。

内容的提问来源于stack exchange，提问作者L.Diaz