Reactjs Can'；t使用formik中的useField上载文件

我正在尝试用formik上传文件。我有以下代码

import { Field, ErrorMessage, useField, FieldProps } from "formik";
import { InputHTMLAttributes } from "react";

type FormikImageFieldProps = InputHTMLAttributes<HTMLElement> & {
  label: string;
  name: string;
  component?: string;
};

const FormikImageField: React.FC<FormikImageFieldProps> = ({
  label,
  size: _,
  ...props
}) => {
  const [field, { error, touched }, helper] = useField<FieldProps>(props);

  return (
    <div className="mb-6 pt-3 rounded bg-gray-200">
      <label
        className="block text-gray-700 text-sm font-bold mb-2 ml-3"
        htmlFor={field.name}
      >
        {label}
      </label>
      <Field
        {...field}
        {...props}
        type="file"
        onChange={(e: any) => {
          helper.setValue(e.currentTarget.files[0]);
        }}
        id={field.name}
        className={`bg-gray-200 rounded w-full text-gray-700 focus:outline-none border-b-4 border-gray-300 focus:border-purple-600 transition duration-500 px-3 pb-3 ${
          touched && error ? "border-red-600" : ""
        }`}
      />
      {touched && (
        <ErrorMessage name={field.name}>
          {() => <div className="text-md text-red-600 italic">{error}</div>}
        </ErrorMessage>
      )}
    </div>
  );
};

export default FormikImageField;

---

知道是什么导致了这个错误吗。另外，我想遵循这段代码，我不想使用setFormikField，因为这会导致另一个错误。谢谢你的时间。

我今天遇到了完全相同的问题。我为此挣扎了一段时间。我发现您必须传递整个

文件

对象。它的类型是

FilesList

，它是唯一可读的对象，存储

文件

对象。 应该是：

helper.setValue(e.currentTarget.files);

或

---

同样重要的是，在Formik表单中，您可以将字段类型设置为

文件[]

，这样可以轻松地将初始值设置为空数组-

[]

。这种方法还为您的定制提供了很大的灵活性。在调用

setValue

方法之前，您可以比较

事件中出现的文件和Formik当前存储在
字段中的文件（来自
useForm
）。我为此挣扎了一段时间。我发现您必须传递整个
文件
对象。它的类型是
FilesList
，它是唯一可读的对象，存储
文件
对象。
应该是：

helper.setValue(e.currentTarget.files);

或

同样重要的是，在Formik表单中，您可以将字段类型设置为
文件[]
，这样可以轻松地将初始值设置为空数组-
[]
。这种方法还为您的定制提供了很大的灵活性。在调用
setValue
方法之前，您可以比较
事件中出现的文件
和Formik当前存储在
字段
对象中的文件（来自
useForm
）

helper.setValue([ e.currentTarget.files[0] ]);