修改

import { Form, Input, InputNumber, Modal, Radio, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { Student } from "../model/Student";
import { useEffect } from "react";
import axios from "axios";
import R from "../model/R";
import { Rule } from "antd/es/form";export default function A6Update({open,onSuccess,student,onCancel,
}: {open: boolean;onSuccess?: () => void;student: Student;onCancel: () => void;
}) {const { Item } = Form;const { Group } = Radio;const options = [{ label: "男", value: "男" },{ label: "女", value: "女" },];//form代表表单对象const [form] = useForm();async function onOK() {const values = await form.validateFields();console.log(values);const resp = await axios.put<R<string>>(`http://localhost:8080/api/students/${values.id}`,values);message.success(resp.data.data);onSuccess && onSuccess();}useEffect(() => {//用点击修改所在行的数据填充表单form.setFieldsValue(student);}, [student]);const nameRules: Rule[] = [{ required: true, message: "姓名必须" },{ min: 2, type: "string", message: "至少两个字符" },];const ageRules: Rule[] = [{ required: true, message: "年龄必须" },{ min: 10, type: "number", message: "至少10岁" },{ max: 120, type: "number", message: "最大120岁" },];return (<Modalopen={open}title="修改学生"onOk={onOK}onCancel={onCancel}forceRender><Form form={form}><Item label="编号" name="id"><Input readOnly></Input></Item><Item label="姓名" name="name" rules={nameRules}><Input></Input></Item><Item label="性别" name="sex"><Groupoptions={options}optionType="button"buttonStyle="solid"></Group></Item><Item label="年龄" name="age" rules={ageRules}><InputNumber></InputNumber></Item></Form></Modal>);
}

• forceRender 是避免因为使用 useForm 后，表单套在 Modal 中会出现下面的警告

•   Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?