同一组件多次调用useForm导致Ant Design表单验证失效问题咨询

问题描述 #

在同一作用域内两次调用useForm()创建表单实例时，Ant Design表单验证出现异常，具体表现为：

• 步骤2首次点击「下一步」时，未触发必填字段验证直接跳转
• 返回步骤1时，已填写的字段值丢失
• 后续步骤1点击「下一步」时，原本有效的验证也失效

复现步骤：

1. 不填写步骤1字段，点击「下一步」，正常触发验证错误
2. 填写步骤1字段后点击「下一步」，进入步骤2
3. 不填写步骤2字段，点击「下一步」，直接进入步骤3（未触发验证）
4. 返回步骤2，再次点击「下一步」，此时才出现验证错误
5. 填写步骤2字段后点击「下一步」，进入步骤3
6. 返回步骤2，字段值保留；再返回步骤1，字段值为空
7. 点击步骤1的「下一步」，无验证错误直接跳转

原因分析 #

Ant Design的useForm()基于React Context实现表单实例传递。同一作用域下多次调用useForm()会生成多个独立的表单实例，这些实例会在Context中产生冲突：

• Form组件无法准确绑定到对应的实例，导致验证逻辑无法关联当前表单字段
• 实例之间的状态互相干扰，引发字段追踪失效，表现为返回步骤时字段值丢失
• 验证逻辑依赖表单实例的状态，实例冲突会导致验证规则无法被正确触发

解决方案 #

1. 为每个独立表单绑定唯一实例 #

将每个步骤的表单拆分为独立组件，在组件内部单独调用useForm()，确保每个Form组件对应唯一的实例：

import { Form, Input, Button } from 'antd';

const Step1 = ({ onNext }) => {
  const [form] = Form.useForm();
  const handleNext = () => {
    form.validateFields().then(values => {
      onNext(values);
    });
  };

  return (
    <Form form={form} layout="vertical">
      <Form.Item
        name="step1Field"
        label="步骤1字段"
        rules={[{ required: true, message: '请填写此字段' }]}
      >
        <Input />
      </Form.Item>
      <Button onClick={handleNext}>下一步</Button>
    </Form>
  );
};

const Step2 = ({ onNext, onBack }) => {
  const [form] = Form.useForm();
  const handleNext = () => {
    form.validateFields().then(values => {
      onNext(values);
    });
  };

  return (
    <Form form={form} layout="vertical">
      <Form.Item
        name="step2Field"
        label="步骤2字段"
        rules={[{ required: true, message: '请填写此字段' }]}
      >
        <Input />
      </Form.Item>
      <Button onClick={handleNext}>下一步</Button>
      <Button onClick={onBack}>返回</Button>
    </Form>
  );
};

// 父组件中根据步骤渲染对应表单

2. 使用单个Form实例实现步骤表单 #

如果是步骤类表单，推荐使用单个useForm()实例，通过控制字段的显示隐藏来切换步骤，避免多实例冲突：

import { Form, Input, Button, Steps } from 'antd';
import { useState } from 'react';

const App = () => {
  const [form] = Form.useForm();
  const [currentStep, setCurrentStep] = useState(0);

  const handleNext = () => {
    const fieldsToValidate = currentStep === 0 ? ['step1Field'] : ['step2Field'];
    form.validateFields({ fields: fieldsToValidate }).then(() => {
      setCurrentStep(prev => prev + 1);
    });
  };

  const handleBack = () => {
    setCurrentStep(prev => prev - 1);
  };

  return (
    <>
      <Steps current={currentStep}>
        <Steps.Step title="步骤1" />
        <Steps.Step title="步骤2" />
        <Steps.Step title="步骤3" />
      </Steps>
      <Form form={form} layout="vertical">
        {currentStep === 0 && (
          <Form.Item
            name="step1Field"
            label="步骤1字段"
            rules={[{ required: true, message: '请填写此字段' }]}
          >
            <Input />
          </Form.Item>
        )}
        {currentStep === 1 && (
          <Form.Item
            name="step2Field"
            label="步骤2字段"
            rules={[{ required: true, message: '请填写此字段' }]}
          >
            <Input />
          </Form.Item>
        )}
        {currentStep < 2 && <Button onClick={handleNext}>下一步</Button>}
        {currentStep > 0 && <Button onClick={handleBack}>返回</Button>}
      </Form>
    </>
  );
};

export default App;

结论 #

你遇到的问题属于使用方式不当，并非Ant Design的Bug或特性。核心原因是同一作用域内重复创建useForm()实例导致Context冲突，破坏了Form组件与实例的绑定关系，进而引发验证失效和字段状态丢失。通过为每个表单绑定唯一实例或使用单个实例管理步骤表单，即可解决该问题。

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