使用Yup.string.test()结合Formik时出现未捕获Promise类型错误

问题现象 #

在useFormik结合Yup的表单验证逻辑中集成第三方ibantools做IBAN验证时，输入框开始输入就触发错误：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isValidIBAN')，错误发生在Yup.test()的验证函数内。

错误原因 #

1. ibantools导入方式错误：代码中默认导入ibantools对象，但该库的核心方法是命名导出，导致无法通过ibantools.isValidIBAN访问到目标方法。
2. transform方法语法错误：return electronicFormatIBAN(value).末尾多了一个点号，会导致返回undefined，进而影响后续验证逻辑。
3. 空值处理缺失：输入为空时直接调用isValidIBAN，传入undefined触发报错。

修复方案及完整代码 #

import { useFormik } from 'formik'
import * as Yup from 'yup'
// 修正导入方式，直接导入所需的命名导出方法
import { electronicFormatIBAN, isValidIBAN } from 'ibantools'

function BankDetails({}: BankDetailsProps) {
  // 省略其他业务代码

  const formik = useFormik({
    initialValues: {
      bankAccountNumber: '',
      bicNumber: '',
      policyNumber: '',
    },
    validationSchema: Yup.object({
      bankAccountNumber: Yup.string()
        .transform(function (value) {
          if (!this.isType(value)) return value
          // 修复多余的点号语法错误，返回格式化后的IBAN
          return electronicFormatIBAN(value)
        })
        .test({
          name: 'is-valid-iban',
          message: t('Forms.BankDetails.Errors.InvalidIBAN'),
          exclusive: true,
          test: (value) => {
            // 空值时跳过验证，若需要必填可添加.required()规则
            if (!value) return true
            // 直接调用导入的isValidIBAN方法做验证
            return isValidIBAN(value)
          }
        })
    })
  })

  return (
    <form className="flex flex-col pt-4">
      <div>
        <Label htmlFor="bankAccountNumber" className="mt-2">
          {t('Forms.BankDetails.IBANLabel')}
        </Label>
        <Input
          kind="text"
          error={formik.errors.bankAccountNumber}
          name="bankAccountNumber"
          value={formik.values.bankAccountNumber}
          touched={formik.touched.bankAccountNumber}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </div>
    </form>
  )
}

关键修复点说明 #

• 导入修正：直接使用命名导入获取isValidIBAN和electronicFormatIBAN，符合ibantools的导出规范。
• 语法修复：移除transform方法返回语句末尾的多余点号，确保返回正确的格式化IBAN字符串。
• 空值处理：在验证函数中先判断输入是否为空，避免传入undefined导致方法调用报错。

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