Yup条件验证报错‘branch is not a function’问题求助

核心问题分析 #

你遇到的branch is not a function错误，根源在于Yup Schema的when方法使用不当，同时存在字段类型不匹配的问题：

• Yup when的then参数格式错误：then需接收函数返回对应字段的验证规则，而非直接创建新的yup.date()实例
• 字段类型不匹配：下拉框的current_working_status值是布尔类型（true/false），但Schema里定义为string()，导致when的判断条件is: 'false'永远匹配不上实际的布尔值false
• DOM显示逻辑判断错误：用字符串'true'和布尔值做比较，导致结束日期的显示逻辑异常

修复步骤 #

1. 修正Yup Schema #

将current_working_status改为布尔类型，同时修正when的写法：

export const experienceSchema = yup.object().shape({
    experience: yup.string().required(),
    job_title: yup.string().required(),
    category: yup.string().required(),
    current_working_status: yup.boolean().required(), // 改为布尔类型
    join_date: yup.date().required(),
    end_date: yup.date().when('current_working_status', {
        is: false, // 匹配布尔值false
        then: (schema) => schema.required('Please enter end date'), // 用函数返回修改后的schema
        otherwise: (schema) => schema.notRequired()
    }),
});

2. 同步Formik初始值类型 #

确保Formik的initialValues中current_working_status的类型与Schema一致，避免初始值异常：

const initialValues = {
  // ...其他字段
  current_working_status: '', // 或初始化为null/布尔值
  join_date: '',
  end_date: ''
};

3. 修正结束日期的显示逻辑 #

将字符串比较改为布尔值判断：

{!formik.values.current_working_status ? (
    <div className=" col-md-5">
        <label className="fw-medium">End Date</label>
        <div className="input-group">
            <input
                type="date"
                id="end_date"
                name="end_date"
                className="form-control"
                placeholder="end_date"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.end_date}
            />
        </div>
        {formik.touched.end_date && formik.errors.end_date ? <div className="edit_error">{formik.errors.end_date}</div> : null}
    </div>
) : ''}

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