setFieldValue、Formik 和 InvalidStateError：无法在“HTMLInputElement”上设置“值”属性答案

【问题标题】：setFieldValue, Formik and InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement'setFieldValue、Formik 和 InvalidStateError：无法在“HTMLInputElement”上设置“值”属性
【发布时间】：2021-06-26 18:28:40
【问题描述】：

我正在尝试使用 Formik 和 setFieldValue 上传文件。

我不明白为什么会这样

InvalidStateError: 无法在 'HTMLInputElement' 上设置 'value' 属性：此输入元素 > 接受文件名，该文件名只能以编程方式设置为空字符串。

当我上传文件时

我对 React 有一些了解，但这是我第一次接触 Formik。

一些（可能有用的）代码

export const ImageUploaderField = ({ ...props }) => {
    const { setFieldValue } = useFormikContext()
    const [field] = useField(props)
    return (
        <Field
            {...field}
            {...props}
            onChange={(event) => {
                setFieldValue(field.name, event.currentTarget.files)
            }}
        />
    )
}

调用站点

<ImageUploaderField name="filename" type="file" />

【问题讨论】：

标签： reactjs forms file upload formik

【解决方案1】：

我遇到了同样的错误。通过将 value={undefined} 属性添加到 <input> 元素使其工作。

【讨论】：

非常感谢！折腾了一天终于修好了。你能告诉为什么应该添加'value = {undefined}'吗？再次感谢！
@uitwaa 很高兴它对您有所帮助！不是 100% 确定它为什么起作用，但我认为这样可以避免 Formik 处理该输入的值。
谢谢@Camilo。这行得通！我认为 Formik 无法正确控制 file 类型的输入元素的值状态，因此将其设置为 undefined 会有所帮助。

【解决方案2】：

不要添加 value={undefined}，而是忽略向字段添加 value 属性

export const ImageUploaderField = ({ ...props }) => {
    const { setFieldValue } = useFormikContext()
    const [field] = useField(props)
    const {value, ...rest} = field;
    return (
        <Field
            {...rest}
            {...props}
            onChange={(event) => {
                setFieldValue(field.name, event.currentTarget.files)
            }}
        />
    )
}

【讨论】：