React Hook Form复选框选中状态持久化问题排查

核心问题 #

1. defaultChecked判断逻辑错误：你的defaultData是数组类型，但代码中用defaultData === value做判断，数组与字符串永远不相等，导致初始渲染时复选框无法正确选中。
2. 直接修改watch返回值无效：watch返回的是react-hook-form内部管理的状态引用，直接赋值source_of_funds__list__checked = ...不会触发组件重渲染，UI自然不会更新。
3. 路由返回后表单状态未同步：路由切换返回时，react-hook-form的表单状态没有从持久化的defaultData中重新初始化，导致watch返回undefined。

具体修复步骤 #

1. 修正Checkbox组件的defaultChecked判断 #

将复选框的选中判断改为数组包含校验：

<input
  {...register(name, {
    required: required,
    validate: CustomValidation,
  })}
  id={name + value}
  type="checkbox"
  name={name}
  value={value}
  defaultChecked={defaultData?.includes(value)} // 修改为数组包含判断
/>

2. 用react-hook-form的setValue初始化表单状态 #

删除你直接修改source_of_funds__list__checked的useEffect，改用官方提供的setValue同步持久化数据：

// 父组件中
const { register, watch, setValue, errors } = useForm();
const source_of_funds__list__checked = watch("source_of_funds__list");

// 从持久化数据同步表单状态
useEffect(() => {
  const defaultValues = props.data.dataTree.customer.source_of_funds.source_of_funds__list;
  if (defaultValues) {
    setValue("source_of_funds__list", defaultValues);
  }
}, [props.data.dataTree.customer.source_of_funds.source_of_funds__list, setValue]);

3. 优化Checkbox组件的className判断 #

用可选链简化条件逻辑，避免冗余判断：

<div
  className={`checkbox ${checked?.includes(value) ? "checked" : ""}`}
>

修复原理 #

• setValue是react-hook-form官方状态修改方法，调用后会更新表单内部状态，触发watch返回值更新，进而让Checkbox组件的checked prop拿到正确值，触发UI重渲染添加样式类。
• 修正defaultChecked后，组件初始渲染时就能正确匹配选中状态，与后续表单状态保持一致。
• 依赖数组中加入defaultValues和setValue，确保路由返回时数据更新后能重新同步表单状态。

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