AntD 表单提交出现错误："<fieldname> need to revalidate"

Question

我有一个有多个字段的AntD表单。我正在使用"@ant-design/compatible"表单。表单中的一个字段是Radio，它有"yes"one_answers"no"选项，初始值为"no"。当我尝试提交表单时，validateFieldsAndScroll函数给了我错误'需要重新验证'。

我的表单代码看起来像这样:

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的版本(需要这样做，因为沙盒没有编译)，没有其他问题显示，代码成功运行，没有任何错误。因此，我无法重新创建该问题。

Answer 1

您应该在这里使用useFormHook来避免对compatible的依赖。

查看如何使用它的文档:ant.design/components/form

这是更容易阅读和理解比旧的形式处理与getFieldDecorator。这将是你的组件使用useForm钩子:

import React from "react";
import { Radio, Button, Form } from "antd";
const App = (props) => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log(values);
};
return (
<div className="App">
<Form layout="vertical" form={form} onFinish={onFinish}>
<Form.Item
label="ABC"
name="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>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</div>
);
};
export default App;

这是一个codeSandbox链接:https://codesandbox.io/s/form-methods-class-component-antd-4-24-2-forked-5mcuqb?file=/demo.tsx