antd表格数据回显在form表单中

在使用antd的过程中，组件Modal中嵌套了一个form表单，需要点击table表格中的编辑按钮，该行数据可以在form表单中进行回显。

表格编辑按钮：

const edit = (record:DataType) => {
  (childRef.current as any).showModalEdit(record);
};

form表单
1.Modal中destroyOnClose={true}搭配form表单preserve={false}使用，可以做到关闭modal，form表单数据清空

<Modal title="创建" open={isModalOpen} okText="提交" cancelText="取消" destroyOnClose={true}
            onOk={handleOk} onCancel={handleCancel} forceRender>
              <Form
              name="basic"
              form={form}
              style={{ maxWidth: 600 }}
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
              preserve={false}
            >
          </Form>
          </Modal>

2.点击编辑按钮，传递该行数据record，在form组件中声明recordobject，点击编辑，modal弹出，将record赋值给recordobject，利用useEffect监督recordobject的变化，并在useEffect中通过form.setFieldsValue设置表单的值。

const [recordobject, setIsRecord] = useState({});
const [form] = Form.useForm();
useEffect(() => {
  form.setFieldsValue({...recordobject})
}, [recordobject])
const showModal = () => {
  setIsModalOpen(true);
};

const showModalEdit = (record:any) => {
  setIsModalOpen(true);
  setIsRecord(record);
};