React Hook Form自动设空字符串致Yup验证报错，如何禁用默认值？

针对你遇到的react-hook-form（RHF）自动为注册字段设置空字符串，导致数字、选择项验证失败的问题，可以通过以下几种简便方法解决：

• 利用register的类型转换选项
  对于数字类型字段，使用valueAsNumber将空输入转换为NaN或有效数字；对于选择类/允许空值的字段，使用valueAsNull将空输入转换为null，配合Yup的验证规则即可避免错误：

  // 数字字段示例
  <input
    type="number"
    {...register("age", { valueAsNumber: true, required: false })}
  />
  
  // 选择字段示例
  <select {...register("gender", { valueAsNull: true, required: false })}>
    <option value="">请选择</option>
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  

  对应的Yup验证规则：

  import * as yup from "yup";
  
  const schema = yup.object().shape({
    age: yup.number().nullable().notRequired(),
    gender: yup.string().nullable().notRequired()
  });
  

• 使用Controller组件替代register
Controller组件对字段值的控制更精细，不会自动填充空字符串，适合复杂类型或需要严格控制默认值的场景：

  import { Controller } from "react-hook-form";
  
  <Controller
    name="age"
    control={control}
    defaultValue={undefined}
    render={({ field }) => (
      <input type="number" {...field} />
    )}
    rules={{
      validate: (value) => value === undefined || !isNaN(value) || "请输入有效数字"
    }}
  />
  

  搭配Yup规则时同样设置nullable().notRequired()即可正常验证。

• 显式设置useForm的defaultValues
  在初始化useForm时，将需要保留空值的字段显式设为undefined或null，覆盖RHF的默认空字符串行为：

  const { register, control } = useForm({
    defaultValues: {
      age: undefined,
      gender: null
    },
    resolver: yupResolver(schema)
  });
  

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