获取未捕获（承诺中）类型错误：使用 Yup.string.test() 进行验证时无法读取未定义的属性。使用 Formik 和是的

Question

我正在尝试在

useFormik

&&

Yup

验证中实现第三方验证，但当我尝试开始在输入上输入内容时，我得到了

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isValidIBAN')

。它破坏了

Yup.test()

功能，我不知道我做错了什么。

这是我现有的代码。

import { useFormik } from 'formik'
import * as Yup from 'yup'

import ibantools, { electronicFormatIBAN } from 'ibantools'

function BankDetails({}: BankDetailsProps) {


// ommitted code 

const formik = useFormik({
    initialValues: {
      bankAccountNumber: '',
      bicNumber: '',
      policyNumber: '',
    },
    validationSchema: Yup.object({
      bankAccountNumber: Yup.string()
        .transform(function (value) {
          if (!this.isType(value)) return value
          return electronicFormatIBAN(value). // Converts the user input into a valid IBAN
        })
        .test({
          name: 'is-valid-iban',
          message: t('Forms.BankDetails.Errors.InvalidIBAN'),
          exclusive: true,
          // @ts-ignore
          test: (value) => ibantools.isValidIBAN(value),  // TESTS that user input is a valid IBAN  [ERROR]: Typerror here. Uncaught in Promise. Cannot read promerty of undefined reading 
          // console.log(value, 'inside iban')
        })


      })
    })
  }


  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>
  }

我想要的是

1. 获取用户输入
2. 使用

   electronicFormatIBAN(value)

将其转换为有效的 iban
3. 在 Yup.test() 中使用

   isValidIBAN()

   测试它是否是有效的 iban
4. 返回该字符串

Answer 1

我刚刚通过从这次通话中删除

ibantools

解决了这个问题

      .test({
          name: 'is-valid-iban',
          message: t('Forms.BankDetails.Errors.InvalidIBAN'),
          exclusive: true,
          // @ts-ignore
          test: (value) => ibantools.isValidIBAN(value), // [NOTE] remove ibantools from here
          // console.log(value, 'inside iban')
        })

现在只要这样做就可以了

        .test({
          name: 'is-valid-iban',
          message: t('Forms.BankDetails.Errors.InvalidIBAN'),
          exclusive: true,
          // @ts-ignore
          test: (value) => isValidIBAN(value),
        })

但是，为什么

ibantools

在

.test()

上下文中不可用，但

isValidIBAN

是 ??

Answer 2

我面临同样的问题，不能使用 ibantools.isValidIBAN 与 yup。请问你有什么解决办法吗？