antd 的 form resetFields

关于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>