AntD兼容版Form提交报错'<字段名> need to revalidate'的原因及解决

问题场景 #

使用@ant-design/compatible的Form组件构建表单，其中包含一个Radio组件（选项为'Yes'/'No'，初始值设为'No'），点击提交时调用validateFieldsAndScroll函数出现报错：<字段名> need to revalidate。

表单代码 #

import React from "react";
import "./styles.css";
import { Form } from "@ant-design/compatible";
import { Radio, Button } from "antd";

const App = (props) => {
  const { getFieldDecorator } = props.form;
  const onClick = () => {
    props.form.validateFieldsAndScroll((err, values) => {
      if (err) {
        console.log("error", err);
      } else {
        console.log("success");
      }
    });
  };
  return (
    <div className="App">
      <Form layout="vertical">
        <Form.Item label="ABC">
          {getFieldDecorator("abc", {
            rules: [
              {
                required: true,
                message: "ABC is mandatory"
              }
            ],
            initialValue: "No",
          })(
            <Radio.Group disabled={false}>
              <Radio value="Yes">Yes</Radio>
              <Radio value="No">No</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("submitButton")(
            <Button type="primary" onClick={onClick}>
              Submit
            </Button>
          )}
        </Form.Item>
      </Form>
    </div>
  );
};

export default Form.create()(App);

使用的包版本 #

"@ant-design/compatible": "1.0.8",
"antd": "4.11.2",
"react": "16.9.0",
"react-dom": "16.6.0"

已尝试操作 #

在沙箱中使用相同版本包复现，仅匹配React与ReactDOM版本即可正常运行，未复现该报错。

报错原因分析 #

• 组件状态不一致：实际项目中可能存在表单组件被重复渲染、字段状态被意外修改的情况，导致Form内部校验状态与组件实际值不匹配，触发"需要重新校验"的报错。
• React核心依赖版本不匹配：项目中react@16.9.0和react-dom@16.6.0版本不一致，沙箱环境依赖简单未触发问题，但实际项目依赖树可能存在其他干扰，导致状态更新异常。
• 冗余字段装饰：代码中对提交按钮使用了getFieldDecorator，按钮不属于表单输入字段，这种冗余操作可能干扰Form内部状态逻辑。
• 兼容包与主版本适配bug：@ant-design/compatible@1.0.8和antd@4.11.2的适配存在潜在bug，特定场景下触发校验逻辑异常。

解决办法 #

• 移除按钮的字段装饰：提交按钮不需要被表单字段管理，删除getFieldDecorator包裹：

  <Form.Item>
    <Button type="primary" onClick={onClick}>
      Submit
    </Button>
  </Form.Item>
  

• 统一React与ReactDOM版本：将react-dom升级至16.9.0，确保核心依赖版本一致：

  npm install react-dom@16.9.0 --save
  

• 同步字段状态后校验：在调用校验前手动同步字段值，确保Form内部状态一致：

  const onClick = () => {
    const abcValue = props.form.getFieldValue('abc');
    props.form.setFieldsValue({ abc: abcValue });
    props.form.validateFieldsAndScroll((err, values) => {
      if (err) console.log("error", err);
      else console.log("success");
    });
  };
  

• 升级兼容版Form包：更新@ant-design/compatible到更适配的版本，比如1.2.1：

  npm install @ant-design/compatible@1.2.1 --save
  

内容的提问来源于stack exchange，提问作者Chandu Naga Sreenivas Velluri