React Hook Form自定义样式单选框切换后界面不更新问题排查

问题根源 #

你的代码存在两个核心问题，导致单选框切换后界面无法同步更新：

1. 误用非受控属性defaultChecked：defaultChecked仅用于初始化组件状态，后续表单数据变化时不会触发DOM更新，而React Hook Form的Controller是受控组件，必须通过受控属性绑定状态。
2. 未正确绑定受控状态：两个单选框都展开了{...field}，但没有利用field.value控制单选框的选中状态，反而依赖初始的auditEval.check值，导致状态与表单数据脱节。

修复后的代码 #

将defaultChecked替换为受控的checked属性，通过field.value判断当前单选框是否选中，同时保留field的onChange等受控逻辑：

<Controller
  name={`evaluations.${index}.check`}
  control={control}
  render={({ field }) => {
    return (
      <>
        <div className={'radioCheck'}>
          <input
            {...field}
            style={{ display: "none" }}
            type='radio'
            name={auditEval.checkpoint?.id.toString()}
            id={`ok${auditEval.checkpoint?.id}`}
            value={'true'}
            // 用field.value判断选中状态，替换defaultChecked
            checked={field.value === 'true'}
          />
          <label htmlFor={`ok${auditEval.checkpoint?.id}`}>
            <FontAwesomeIcon icon={faCheck} />
          </label>
        </div>
        <div className={'radioCross'}>
          <input
            {...field}
            style={{ display: "none" }}
            type='radio'
            name={auditEval.checkpoint?.id.toString()}
            id={`nok${auditEval.checkpoint?.id}`}
            value={'false'}
            // 同理绑定受控选中状态
            checked={field.value === 'false'}
          />
          <label htmlFor={`nok${auditEval.checkpoint?.id}`}>
            <FontAwesomeIcon icon={faX} />
          </label>
        </div>
      </>
    )
  }}
/>

额外说明 #

• 确保Controller的name路径（evaluations.${index}.check）在表单的初始值中正确定义，否则field.value会为空，导致初始选中状态异常。
• 单选框的name属性（auditEval.checkpoint?.id.toString()）用于分组，确保同一组的单选框只能选中一个，这个逻辑是正确的，可以保留。

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