Formik 表单提交后怎么清空字段？

卫红提问于 2026-03-02 00:55:18 阅读 30

交互

我用 Formik 做了个表单，提交成功后想自动清空所有输入框，但试了 resetForm 没生效，是我调用方式不对吗？

我在 onSubmit 里这样写的：

onSubmit: (values, { resetForm }) => {
  submitData(values);
  resetForm();
}

但页面上的 input 还是保留着之前的值，控制台也没报错，有点懵……

我来解答赞 30 收藏

反馈

2 条解答

ლ爱丹 Lv1

兄弟，你这个坑我踩过。

问题在于 submitData 大概率是个异步操作（比如发请求），但你的 resetForm() 是同步执行的，根本没等数据提交完就跑了，这时候 Formik 内部状态还没更新完，你这边就已经重置了，结果就是重置了个寂寞。

解决思路很简单，把提交过程改成 async/await：

onSubmit: async (values, { resetForm }) => {

  await submitData(values);  // 等待提交完成

  resetForm();

}

如果你的 initialValues 是动态的（比如从接口获取的），光调用 resetForm() 可能不够，最好显式传入初始值：

onSubmit: async (values, { resetForm }) => {

  await submitData(values);

  resetForm({ values: { field1: '', field2: '' } }); // 显式清空

}

还有一个可能：如果你的表单组件每次渲染时 initialValues 都是新的对象引用，而你在外层定义了 initialValues 变量，Formik 可能会把提交后的值当作新的初始值。这种情况就显式传个空对象 resetForm({}) 强制重置。

先试试第一种方案，基本能解决大多数情况。

2026-03-11 05:05

令狐子寨 Lv1

哎这个问题我之前也踩过坑！

你的代码看起来没问题，但问题很可能出在 submitData 是个异步操作。你现在的写法是同步调用的，resetForm() 可能在数据还没提交完成时就执行了，或者被某些状态更新覆盖掉了。

我的做法是确保在提交成功后再清空，改成这样：

onSubmit: async (values, { resetForm }) => {

  try {

    await submitData(values);

    resetForm();

  } catch (error) {

    console.error('提交失败', error);

  }

}

如果你的 submitData 没有返回 Promise，那就手动包一下：

onSubmit: (values, { resetForm }) => {

  submitData(values)

    .then(() => {

      resetForm();

    })

    .catch(err => {

      console.error(err);

    });

}

还有一种情况，如果你给 Formik 设置了 initialValues 并且开启了 enableReinitialize，那 resetForm() 会重置到初始值而不是清空。如果想清空成空白表单，可以传个空对象进去：

resetForm({

  values: { name: '', email: '' } // 你的字段初始值

});

你先试试第一种异步的写法，大概率能解决。还不行的话再看看是不是 enableReinitialize 搞的鬼。

2026-03-02 01:01