React+TypeScript 独立Yup校验schema实现groupID范围校验问题求助

核心错误点 #

• queryParam的when配置里，依赖字段名写错：原本要基于groupID的值做判断，错误填写了不存在的is_in_list字段，判断逻辑根本不会触发
• 独立文件下用this.parent.groupID取值完全无效：模块顶层导出的常量作用域中，this不指向Yup的运行时校验上下文，TS无法识别parent属性，运行时也拿不到父级字段值
• 投票类字段的校验规则不完整：positiveAnswer/negativeAnswer只配置了isVoteType为true时的校验，未配置为false时的规则，容易出现非预期的空值校验报错
• includes判断缺少空值兼容：如果groupID为undefined（表单未赋值的初始场景），直接调用includes会抛出类型错误

修正后的校验Schema代码 #

import * as Yup from 'yup';

export const validationSchema = Yup.object().shape({
  text: Yup
    .string()
    .defined()
    .max(2048, "Az üzenet szövege túl hosszú,"),
  groupID: Yup
    .number()
    .min(1),
  queryParam: Yup
    .string()
    // 依赖字段改为实际存在的groupID
    .when("groupID", {
      // 用函数入参接收依赖字段的值，完全不需要this，TS可自动推导类型
      is: (groupID?: number) => {
        // 加判空逻辑兼容表单初始空值场景
        return groupID !== undefined && [2, 3, 4].includes(groupID);
      },
      then: Yup
        .string()
        .defined("Kötelező mező."),
      otherwise: Yup
        .string()
        .nullable()
    }),
  isVoteType: Yup.boolean(),
  positiveAnswer: Yup
    .string()
    .when("isVoteType", {
      is: true,
      then: Yup.string().required("Kötelező mező."),
      // 补全非投票场景的校验规则，允许空值
      otherwise: Yup.string().nullable()
    }),
  negativeAnswer: Yup
    .string()
    .when("isVoteType", {
      is: true,
      then: Yup.string().required("Kötelező mező."),
      otherwise: Yup.string().nullable()
    })
});

关键修改说明 #

• 彻底替换this取值逻辑：Yup的when配置支持将is设为函数，函数入参就是第一个参数指定的依赖字段的当前值，既解决了独立模块下this指向错误的问题，也能让TS自动推导字段类型，不会再出现属性无法识别的报错
• 修正依赖字段名：必须填写要关联的实际表单字段名，才能正确触发对应条件的校验逻辑
• 补全判空与分支规则：兼容表单初始加载时的空值场景，避免非预期的校验报错

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