React中如何在Antd Modal内使用多Form？解决表单实例未定义问题

问题根源很明确：Form.useForm()一次调用只会生成一个表单实例，你用数组解构试图取第二个值赋值给secondForm，但这个值根本不存在，所以输出undefined。

正确的做法是给每个Form单独调用Form.useForm()来获取对应的实例：

修改后的完整代码：

const GenerateReportModal = ({ isVisible, onCLose, title, ...props }) => {
  // 每个表单单独调用useForm获取实例
  const [form1] = Form.useForm();
  const [secondForm] = Form.useForm();

  const onChangeTemplate = (selectedTemplateId) => {
    console.log(secondForm); // 现在能正确获取到表单实例了
  };

  return (
    <Modal
      forceRender
      width="75%"
      title={false}
      visible={isVisible}
      onCancel={() => {
        onCLose();
      }}
      footer={null}
      getContainer={false}
    >
      <div>
        <AntSelect
          allowClear
          placeholder="Select Template "
          style={{ width: "20%" }}
          onChange={onChangeTemplate}
        />
      </div>

      <Panel header={titleRender("Select fields")} key="1">
        <Form form={form1}>
          <Input />
        </Form>
      </Panel>

      <div>
        <div style={{ padding: "12px" }}>
          <h5>Select report type</h5>
          <Form form={secondForm}>
            <Form.Item name="reportType">
              <Select
                allowClear
                options={props.reportTypes} // Antd Select的选项属性是options，修正原代码的itemList
                onChange={(value) => console.log(value)} 
              />  
            </Form.Item>
          </Form>
        </div>
      </div>
    </Modal>
  );
};

额外提醒：

• 原代码中Modal的visible属性写死为visible，应该绑定传入的isVisible参数，否则模态框会一直显示，示例中已修正
• 你的Modal已经开启forceRender，这很关键，它能确保表单组件在模态框初始化时就完成渲染，避免因懒加载导致表单实例无法正常初始化

内容的提问来源于stack exchange，提问作者Kalana Tebel