选择文件时重新渲染 Formik答案

【问题标题】：Formik Being Re-rendered When A File Is Selected选择文件时重新渲染 Formik
【发布时间】：2023-01-13 12:28:54
【问题描述】：

我正在尝试添加一个图像上传字段，但每当我选择一个文件时，整个表单都会被重新呈现。

使用Formik如下：

const { values, handleBlur, handleChange, touched, handleSubmit, errors } =
    useFormik({
      initialValues: {
        userName: userName,
        name: name,
        lastName: lastName,
        password: password,
        ownerId: ownerid,
        url: url ? url : "",
      },
      validationSchema: AgentSchema,
      onSubmit: onSubmit,
    });

表单元素本身是：

<input
          type='file'
          name='url'
          accept='image/*'
          onChange={(e) =>
            setFieldValue('url', e.currentTarget.files[0])
          }
        />

我尝试了这个 solution 并使用 useState 钩子首先设置文件并在提交期间处理这个问题但没有运气，每个动作都会重新呈现表单或组件。当我尝试在表单外部使用 useState 挂钩进行测试时，重新渲染问题并没有消失，但文件选择成功，所以在这种情况下，而不是整个组件，只有 Formik 部分被重新渲染，这很奇怪。尝试任何其他解决方案结果无法选择文件。

我想要完成的是在不丢失其他表单数据的情况下选择文件。

【问题讨论】：

标签： reactjs file-upload formik

【解决方案1】：

问题是当我用初始值填充表单时，获取初始数据的查询在窗口焦点上重新获取。当我选择一个文件时，我将返回到表单，因此再次成为窗口焦点。通过将以下选项添加到预先填写表格的查询中解决了问题：refetchOnWindowFocus: false

【讨论】：