React Hook Form：如何将复选框组值转为数值数组

方案1：利用register的setValueAs字段级转换 #

这是React Hook Form官方推荐的类型转换方式，直接在字段注册阶段完成类型转换，无需在提交后额外处理逻辑，扩展性强。

修改CategoryCheckbox.tsx中的注册逻辑：

<input
  type="checkbox"
  {...register(registerKey, {
    setValueAs: (value) => Number(value)
  })}
  value={category.id}
  className="mr-2"
/>

同时修正FiltersLayout.tsx中的类型定义（原类型与实际存储值不匹配）：

type FiltersFormValues = {
  categories?: number[]; // 改为number[]，而非ICategory[]
  price?: IMinMaxRange;
  rating?: IMinMaxRange;
};

方案2：通过Controller的transform统一处理数组 #

如果需要更复杂的数组处理逻辑（比如空值兜底），可以用Controller的transform属性批量转换整个数组：

重构CategoryCheckbox.tsx，去掉冗余的register与Controller混用：

function CategoryCheckbox({ registerKey, category }: ICategoryCheckboxProps) {
  const { control } = useFormContext();

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-2">
        <label className="text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
          <Controller
            name={registerKey}
            control={control}
            transform={(value) => {
              // 确保返回数字数组，空值时返回空数组
              return Array.isArray(value) ? value.map(Number) : [];
            }}
            render={({ field }) => (
              <input
                type="checkbox"
                {...field}
                value={category.id}
                className="mr-2"
              />
            )}
          />
          {category.name}
        </label>
      </div>
      <Separator className="mb-2" />
    </div>
  );
}

同样需要将FiltersFormValues中的categories类型修正为number[]。

关键说明 #

• 避免提交后遍历转换：这种方式会将类型转换逻辑与业务逻辑耦合，字段增多时维护成本飙升，而React Hook Form的内置转换能力能将逻辑内聚到字段配置中，符合单一职责原则。
• 类型匹配必须修正：原代码中categories定义为ICategory[]，但实际存储的是ID值，类型不匹配会导致TS编译错误，修正后能获得完整的类型提示和校验能力。

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