Yup.mixedtest似乎破坏了Formik表单验证

问题描述

这可能看起来很长，但这仅是因为我想确保提供所有的信息。所以我在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
}

这是validationSchema的相关部分：

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（）验证器，则此方法很好（错误消息出现在模糊处）。当验证器在那里时，什么也没有发生-仅当我选择带有文件输入字段的文件时，验证错误消息才会出现。

我一直在查看Yup和Formik文档，但在堆栈溢出时都找不到任何有关此的信息。

有人可以指出我想念的东西吗？

谢谢。

解决方法

可能是您的验证器抛出了意外错误。 console.log(value)-您可能会发现它在某些时候不是对象，尝试访问size和type属性会引发错误，导致验证失败。