reactjs - 使用 Formik/Yup 的可选文件验证

Question

如果选择了文件，我想验证文件输入，我找到了 Formik/Yup 的解决方案，但即使未选择文件，它也会验证。

avatar: Yup.mixed()
    .test("fileSize", "File is too large", value => {
      return value && value.size <= FILE_SIZE;
    })
    .test(
      "fileFormat",
      "Unsupported Format",
      value => value && SUPPORTED_FORMATS.includes(value.type)
    )

当我输入其他输入时它会触发验证，我只想在文件存在时触发它，因为头像是可选的！

Answer 1

问题是测试仅在存在时才返回true（意味着它验证） 。value当值不存在时，您必须添加一个条件来接受值（即： isnull或undefined）。

我有完全相同的问题，我解决了这样的问题：

avatar: Yup.mixed()
  .test(
    "fileSize",
    "File is too large",
    value => !value || (value && value.size <= FILE_SIZE)
  )
  .test(
    "fileFormat",
    "Unsupported Format",
    value => !value || (value => value && SUPPORTED_FORMATS.includes(value.type))
  )