我尝试使用 React Hook Form 和 Yup 进行文件输入验证。我在下面编写了代码，但是当我测试文件的大小时，它在这里向我显示console.log(value[0].size);，即使我在文件输入中选择了一个文件，该值也是未定义的。它有什么问题？

我正在使用FormProvider和useFormContext。

在我的 Parent.js 我有这个代码：

const Parent = () => {
  const addingProcess = () => {
    //..
  };

  const validationSchema = Yup.object().shape({
    photo: Yup.mixed()
      .required("You need to provide a file")
      .test("fileSize", "File Size is too large", (value) => {
        console.log(value[0].size);
        return value[0].size <= 5242880;
      })
      .test("fileType", "Unsupported File Format", (value) =>
        ["image/jpeg", "image/png", "image/jpg"].includes(value.type)
      ),
  });

  const methods = useForm({
    mode: "onSubmit",
    resolver: yupResolver(validationSchema),
  });

  const { handleSubmit } = methods;

  return (
    <Wrapper>
      <FormProvider {...methods}>
        <Form onSubmit={handleSubmit(addingProcess)}>
            <Photos />
        </Form>
      </FormProvider>
    </Wrapper>
  );
};

在我的 Photos.js 中，我有：

const Photos = () => {
  return (
    <Wrapper>
    <PhotoHolder/>
    </Wrapper>
  );
};

export default Photos;

在我的 PhotoHolder.js 文件中，我有这个（是的，我需要像这样的 onChange）：

const PhotoHolder = () => {
  const { register } = useFormContext();
  const validator = register("photo");

  return (
    <Input
    name="photo"
    type="file"
    multiple
    onChange={(e) => {
        validator.onChange(e);
    }}
    />
  );
};