使用 React Hook Form 和 Yup 进行文件输入验证

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

我在用FormProvider and 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);
    }}
    />
  );
};

我认为你可以使用该功能使用控件像这样渲染：

<Controller
    control={control}
    name="photo"
    render={({ field: { onChange, onBlur, value, ref } }) => (
      <Photos
        onBlur={onBlur}
        value={value}
        onChange={onChange}
        {...field}
      />
    )}
  />

通过这种方法，我们可以验证自定义输入，这里的关键概念是我们必须将控制对象和字段传递到自定义输入组件中。

欲了解更多信息，您可以访问此文档https://react-hook-form.com/api/usecontroller/controller https://react-hook-form.com/api/usecontroller/controller