React受控复选框设置布尔默认值报错，求解决方法

错误原因 #

你遇到的类型错误是因为React Hook Form中，复选框的defaultValue属性要求类型为string | number | readonly string[] | undefined，但你传入了boolean类型的值，导致类型不兼容。

解决方法 #

方法一：在useForm初始化时配置默认值（推荐） #

React Hook Form推荐将表单默认值统一配置在useForm的defaultValues选项中，无需在input组件上单独设置defaultValue：

import { useForm } from "react-hook-form";

// 初始化表单时设置默认值
const { register } = useForm({
  defaultValues: {
    car: data.car ?? false // 用空值合并运算符处理data.car可能为undefined的场景
  }
});

// 渲染复选框
<input
  {...register("car")}
  type="checkbox"
/>

方法二：动态设置初始值（适用于异步数据场景） #

如果默认值是通过异步请求获取的，可以在请求完成后用setValue方法手动设置：

import { useForm, useEffect } from "react-hook-form";

const { register, setValue } = useForm();

// 数据加载完成后设置初始值
useEffect(() => {
  if (data) {
    setValue("car", data.car ?? false);
  }
}, [data, setValue]);

// 渲染复选框
<input
  {...register("car")}
  type="checkbox"
/>

补充说明 #

HTML原生的input[type="checkbox"]的defaultValue本质是字符串类型（默认值为"on"），而React Hook Form对单个复选框的状态管理是基于boolean的，因此直接给defaultValue传布尔值会触发类型错误，正确的做法是通过React Hook Form提供的API来管理表单默认值。

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