React中使用Yup条件校验时出现branch is not a function错误排查

数据老陈

2026-7-2

问题原因与解决方案

核心错误原因

Yup when方法使用错误：在contactDate的when配置中，then回调不应创建新的Yup.date()实例，而是要基于当前字段的Schema扩展校验规则。原代码中then: Yup.date().required(...)会生成新的Schema对象，破坏Yup内部的分支校验逻辑，导致branch is not a function错误。
boolean字段的冗余校验：isContacted字段的required()完全多余，因为boolean类型的false本身就是合法值，该校验仅会要求字段存在，而你的初始值已经设置为false，这个规则只会徒增不必要的校验逻辑。
日期字段未允许空值：contactDate字段未配置.nullable()，当isContacted为false时，contactDate的值是null，而默认的Yup.date()不接受null，导致校验失败，无法点击保存按钮。

修正后的Schema代码

const RefereeFormSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  mobile: Yup.string().matches(APP_CONFIG.REGEX_PHONE, 'Invalid Mobile').required('Mobile is required'),
  relationship: Yup.string().required('Relationship is required'),
  isContacted: Yup.boolean(), // 移除多余的required()
  contactDate: Yup.date()
    .nullable() // 允许字段为null
    .when('isContacted', {
      is: true,
      then: schema => schema.required('Contact date is required'), // 基于当前Schema扩展规则
    }),
});