是的.mixed().test()似乎破坏了Formik表单验证

Question

这可能看起来很长，但这只是因为我想确保提供我所拥有的所有信息。因此，我在react组件中有一个Formik表单，它处理一些文本输入和一些文件上传。我在React类组件中使用这个Formik组件：

<Formik 
initialValues={{
...initialValues, //no need to list them all here
affiliateLogo: null,
}} 
validationSchema={validationSchema}
onSubmit(values=>{//do something with the values})
>
{(
values,
errors,
touched, 
setFieldValue,
handleSubmit,
handleChange,
handleBlur
) => <form>...</form>}
</Formik>

这是文件上传输入字段：

<input
type="file"
id="affiliateLogo"
name="affiliateLogo"
onChange={event => setFieldValue('affiliateLogo', event.currentTarget.files[0])}
onBlur={handleBlur}
/>
//validation error message added to every input field as below
{
errors.affiliateLogo && touched.affiliateLogo
? <p className="errors">{errors.affiliateLogo}</p>
: null
}

这是验证模式的相关部分：

affiliateLogo: Yup.mixed()
.test('fileType', 'Unsupported File Format', function (value) {
const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png'];
return SUPPORTED_FORMATS.includes(value.type)
})
.test('fileSize', "File Size is too large", value => {
const sizeInBytes = 500000;//0.5MB
return value.size <= sizeInBytes;
})

出于某种原因，当Yup.mixed((.test((被添加到validationSchema中时，表单验证会中断：直到我选择了一个带有文件输入的文件，验证错误才会显示，然后才突然出现错误消息(问题不在于验证本身，而是以错误消息的形式显示验证结果(。

因此，假设我尝试提交一个未经修改的表单——我希望所有的错误消息都会出现(因为表单验证应该由Formik在提交时触发(，但当这个文件输入与Yup.mixed((.test((验证器连接时，什么也没发生。然后，我继续选择一个文件，它会显示所有错误消息(包括文件输入本身的正确错误消息(。

或者另一个例子：我访问了一个必需的文本字段，然后不在其中键入任何内容就离开了它。如果我注释掉Yup.mixed((.test((验证器，这就很好了(错误消息显示在blur上(。当验证器在那里时，不会发生任何事情——只有当我选择一个带有文件输入字段的文件时，验证错误消息才会出现。

我一直在查看Yup和Formik文档，但找不到任何关于这方面的信息，在堆栈溢出方面也找不到。

有人能指出我遗漏了什么吗？

提前谢谢。

Answer 1

您的验证器可能抛出了一个意外错误。console.log(value)-您可能会发现它在某个时刻不是obect，并且尝试访问大小和类型属性会抛出一个错误，导致验证中断。