关于antd中 react 的 form 表单的赋值和重置的问题
如果你的表单后续需要重置，那么在给表单赋值的时候，需要用
import {getDetail} form './sever'
const [form] = Form.useForm(); // Your form
....
// get your api informations
const { data: res } = await getDetail(Id);
//set form, don't use setState to set your information
form.setFieldsValue(res?.data); // res?.data是链式写法，效果等同于 res && res.data
.....
// when you want to reset your form,use this sentences
form.resetFields()
//over--
...
return (
<>
<Modal
onOk={() => {
form.validateFields().then((values) => {
onSaveFinish(values);
}) .catch((info) => {
console.log('Validate Failed:', info);
});
}}
>
<Form
form={form}
onFinish={onSaveFinish}
validateMessages={validateMessages}
layout="vertical"
>
....
// your form content
</Form>
</Modal>
</>
)
以上说明：表单在赋值时不要用 setState 给表单赋 initValues, 这样很可能会使表单的值无法清空，下面是错误的使用方式
// 以下是错误使用方式
const [initialValues, setInitialValues] = useState({});
// get your api informations
const { data: res } = await getDetail(id);
setInitialValues(res?.data)
.....
<Form
form={form}
onFinish={onSaveFinish}
initialValues={initialValues}
validateMessages={validateMessages}
layout="vertical"
>
....
// your form content
</Form>
