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

Question

这可能看起来很长，但这只是因为我想确保提供我拥有的所有信息。所以我在一个反应组件中有一个 Formik 表单，它处理几个文本输入和一些文件上传。我在 React class 组件中使用这个 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 时，表单验证中断：验证错误不会显示，直到我 select 一个包含文件输入的文件然后才突然出现错误消息（问题不在于验证本身，而是以错误消息的形式显示验证结果）。

所以假设我尝试提交一个未修改的表单 - 我希望出现所有错误消息（因为表单验证应该由 Formik 在提交时触发）但是当这个文件输入与 Yup.mixed().test() 验证器。然后我继续 select 一个文件，它会显示所有错误消息（包括文件输入本身的正确错误消息）。

或者另一个例子：我访问了一个必填的文本字段，然后没有输入任何内容就离开了。如果我注释掉 Yup.mixed().test() 验证器，这工作正常（错误消息出现在模糊处）。当验证器在的时候，什么也没有发生——验证错误信息不会出现，只有当我select一个带有文件输入字段的文件时才会出现。

我一直在查看 Yup 和 Formik 文档，但找不到任何相关信息，堆栈溢出也没有找到。

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

提前致谢。

Answer 1

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

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

Yup.mixed().test() seems to break Formik form validation

javascript

reactjs

yup

formik