点击提交按钮重置antd ProForm字段无效的解决方法

常见原因及对应解决方案 #

1. 确认form实例正确初始化 #

首先要确保你是通过useForm钩子正确创建并传递form实例，而非直接声明变量：

import { useForm } from '@ant-design/pro-form';

// 在组件内部创建form实例
const [form] = useForm();

如果form实例未正确初始化，调用resetFields自然不会生效。

2. 延迟执行重置操作 #

axios请求完成后，DOM可能还未完成更新，导致重置逻辑失效，可以通过微任务延迟执行：

const onFinishHandler = async (value) => {
    try {
      await axios.post("URL", {...})
      // 延迟执行重置，适配DOM更新时机
      await Promise.resolve();
      form.resetFields();
    } catch (e) {
      console.log(e)
    }
  }

3. 显式指定重置字段 #

如果部分字段未被自动识别，可直接传入字段名数组明确指定重置范围：

form.resetFields(['vendor', 'cost', 'purchaseDate']);

4. 手动设置初始值替代resetFields #

若resetFields始终不生效，可直接通过setFieldsValue手动将字段设为初始状态：

const onFinishHandler = async (value) => {
    try {
      await axios.post("URL", {...})
      form.setFieldsValue({
        vendor: undefined, // 替换为你的字段初始默认值
        cost: undefined,
        purchaseDate: undefined
      });
    } catch (e) {
      console.log(e)
    }
  }

5. 检查ProForm的preserve配置 #

确保ProForm未设置preserve: true（该属性会保留表单值，阻止重置），若有设置需改为preserve: false或直接移除（默认值为false）：

<ProForm 
  layout="horizontal" 
  onFinish={onFinishHandler} 
  form={form}
  preserve={false}
>
  {/* 表单字段 */}
</ProForm>

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