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



我正试图在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. 测试它是一个有效的iban,在Yup.test()中有isValidIBAN()
  4. 返回该字符串

我刚刚通过从这个调用中删除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可用??