Ant 的弹框+表单，动态更新表单字段值

Ant 的弹框+表单，动态更新表单字段值。当表格每行数据查看或编辑时，弹框里面表单呈现对应行的数据。

使用方法：

form.setFieldsValue( );是 Ant Design 的 Form 组件提供的一个方法，用于动态地设置表单字段的值。当你有一个表单实例，并且想要根据某些数据来更新表单字段时，你可以使用这个方法。

1. 获取表格当前行数据record
   当你调用 form.setFieldsValue(record) 时，Form 组件会首先遍历 record 对象的所有键。这些键需要与表单中各个字段的 name 属性相匹配。

2. 同步表单状态：
   setFieldsValue 方法会同步更新 Form 组件的内部状态，确保表单的状态与传入的 record 对象保持一致。

     const [formOne] = Form.useForm();
     const [editorModalOpen, setEditorModal] = useState(false); 
     const editorModal = (record) => {  
       console.log(record);
       setEditorModal(true);  
       formOne.setFieldsValue(record); //手动更新表单字段
     };

3. 渲染更新：
   在模态框内部使用<Form>组件创建表单，通过form={form}将之前创建的表单实例传递给表单组件。

代码：

const [recordData, setRecordData] = useState(null);
const [editorModalOpen, setEditorModal] = useState(false);
const [form] = Form.useForm();

const editorModal = (record) => {
  console.log(record);
  setEditorModal(true);
  setRecordData(record);
  form.setFieldsValue(record); // 手动更新表单字段的值
};

// 其他代码...

<Modal
  title="编辑膳食分组"
  visible={editorModalOpen}
  onCancel={editorCancel}
  footer={null}
>
  <Form
    form={form} // 绑定表单实例
    // 其他属性...
  >
    {/* 表单内容 */}
  </Form>
</Modal>