解決ant design出現:'Instance created by `useForm` is not connect to any Form element.警告的問題

出現的警告：

參考代碼

````jsx
import React, {useEffect} from 'react';
import propTypes from 'prop-types';
import {Button, Form, Input, Modal} from 'antd';

import memoryUtil from '../../util/memoryUtil';

const {Item} = Form;

/*修改分類確認框組件*/
function UpdateCategory(props) {
    const {showStatus, setShowStatus} = props;
    const category = memoryUtil.category; // 從內存中讀取分類
    const [form] = Form.useForm();  // 獲取form對象

    useEffect(() => {
        // 顯示輸入框默認字段
        form.setFieldsValue({
            categoryName: category.name,
        });
    }, [category.name, form]);

    // 處理確定回調
    const handleOk = () => {
        setShowStatus(0); //關閉修改分類確認框

    };

    // 處理表單提交
    const onFinish = (values) => {
        console.log('UpdateCategory', values);
    };

    return (
        <Modal
            title="修改分類"
            visible={showStatus === 2}
            onOk={handleOk}
            onCancel={() => setShowStatus(0)}
        >
            <Form
                form={form}
                onFinish={onFinish}
            >
                <Item name="categoryName">
                    <Input placeholder="請輸入分類名稱"/>
                </Item>
                <Item>
                    <Button htmlType="submit">提交</Button>
                </Item>
            </Form>
        </Modal>
    );
}


/*類型檢測*/
UpdateCategory.propTypes = {
    showStatus: propTypes.number.isRequired,
    setShowStatus: propTypes.func.isRequired,
};

export default UpdateCategory;
````

問題原因

• ant design在Modal中使用Form表單，並且通過Form.useForm()， 獲取form對象將其掛載到指定的Form表單後仍會出現’Instance created by useForm is not connect to any Form element. Forget to pass form prop’警告這是由於ant design的Modal組件會在Form表單之前創建，因此當頁面初始化時form對象會找不到可關聯的Form表單，於是出現上述警告

解決辦法

• 解決辦法十分的簡單，只要在Modal組件中添加上 getContainer={false} 即可，如同下面的代碼：

  <Modal
      getContainer={false}
      title="修改分類"
      visible={showStatus === 2}
      onOk={handleOk}
      onCancel={() => setShowStatus(0)}
  >
      <Form
          form={form}
          onFinish={onFinish}
      >
          <Item name="categoryName">
              <Input placeholder="請輸入分類名稱"/>
          </Item>
          <Item>
              <Button htmlType="submit">提交</Button>
          </Item>
      </Form>
  </Modal>