React Hook Form多选框未选中返回false而非空数组，是否有开箱即用方案？

React Hook Form 提供了开箱即用的配置来处理这个问题，不用完全自己实现逻辑，推荐两种可行方案：

方案1：通过 register 的 setValueAs 转换值 #

在注册字段时，用 setValueAs 选项把全不选时返回的 false 转为空数组，同时保留多选时的数组格式：

<>
  <label>
    <input type="checkbox" value="a" {...register('category', {
      setValueAs: (value) => Array.isArray(value) ? value : []
    })} />a
  </label>
  <label>
    <input type="checkbox" value="b" {...register('category', {
      setValueAs: (value) => Array.isArray(value) ? value : []
    })} />b
  </label>
</>

方案2：设置表单默认值为空数组 #

初始化 useForm 时给 category 设置默认值为空数组，结合你的 Zod Schema 验证，确保字段始终以数组类型存在：

const { register } = useForm({
  defaultValues: {
    category: []
  },
  resolver: zodResolver(yourSchema) // 替换成你实际的Zod Schema
});

保持原有的多选框绑定代码即可，这时全不选时 category 会维持为空数组，而非 false。

如果同时使用两种方案，效果会更稳妥，既能保证初始状态符合 Schema 要求，也能在操作时自动修正异常值。

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