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

Question

这可能看起来很长，但这只是因为我想确保提供我所拥有的所有信息。所以我在一个反应​​组件中有一个 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 文档，但找不到任何关于此的内容，也没有关于堆栈溢出的内容。

谁能指出我错过了什么？

提前谢谢你。

Answer 1

您的验证器可能会抛出意外错误。 console.log(value) - 你可能会在某个时候发现它不是一个问题，并且尝试访问 size 和 type 属性会引发一个导致验证中断的错误。