iPhone端Chrome浏览器中Formik表单意外重置问题求助

问题分析 #

这是iPhone端Chrome浏览器与Formik同步提交逻辑交互时的特有兼容性问题：提交表单后未调用resetForm，但字段自动清空。核心原因是同步onSubmit函数未完全阻止浏览器默认表单行为，或Formik内部状态更新在该环境下出现异常。

可行解决方案 #

方案1：将onSubmit改为异步函数 #

即使没有实际异步操作，用async/await包装提交逻辑，让Formik正确处理状态：

import React from 'react';
import { Formik, Form, Field } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={async (values) => { // 改为async函数
        console.log('Form values:', values);
        // 可选：添加空Promise等待，确保异步流程完成
        await Promise.resolve();
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" placeholder="Name" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;

方案2：手动阻止表单默认提交行为 #

在Form组件上显式添加onSubmit事件，阻止浏览器默认行为：

{({ isSubmitting, submitForm }) => (
  <Form onSubmit={(e) => {
    e.preventDefault();
    submitForm();
  }}>
    <Field type="text" name="name" placeholder="Name" />
    <button type="submit" disabled={isSubmitting}>
      Submit
    </button>
  </Form>
)}

方案3：手动控制提交状态 #

在onSubmit中显式调用setSubmitting(false)，避免Formik内部状态异常导致的重置：

onSubmit={(values, { setSubmitting }) => {
  console.log('Form values:', values);
  setSubmitting(false); // 手动结束提交状态
}}

验证步骤 #

修改代码后按以下流程测试：

• 在iPhone端Chrome打开应用
• 填写表单字段
• 提交表单，确认字段未被自动清空
• 检查控制台是否正常输出表单值

内容的提问来源于stack exchange，提问作者Dewmal