Ant-design: المثيل الذي تم إنشاؤه بواسطة `useForm` لا يتصل بأي عنصر نموذج. هل نسيت تمرير خاصية` النموذج`؟ من الواضح أنه يتبع المثال.

مرحبًاLamTech. يُرجى تقديم نسخة عبر الإنترنت عن طريق تكسير هذا الرابط https://u.ant.design/codesandbox-repro أو الحد الأدنى من مستودع GitHub. سيتم إغلاق المشكلات المصنفة بواسطة Need Reproduce إذا لم تكن هناك أنشطة في 7 أيام .

مرحبًا LamTech ، نريد منك تقديم مثال هنا لإنشاء رمز وصندوق أو توفير الحد الأدنى من مستودع GitHub. سيتم إغلاق المشكلات التي لم تتم متابعتها في غضون 7 أيام تلقائيًا.

المفتاح هو أنني أستخدم هذه الطريقة ، لكنها تستمر في الإبلاغ عن تحذير الخطأ هذا.

نفس المشكلة هنا ، لكن لن يقوم كولود بإعادة إنتاجها على الكود وصندوق.

+1

أضف سمة forceRender إلى Modal

يمكنك إضافة تأخير إلى طريقة setFieldsValue

استدعاء form.resetFields () ؛ يبدو مثل هذا. سيتم الإبلاغ عن http: // localhost : 8001 / component / form-cn / # component-form-demo-form-Context الذي بدأ محليًا.

+1
سيظهر هذا التحذير عند استخدام setFieldsValue ، ولكن يمكن تقديمه بسلاسة ،
لقد اجتزت مثيل useForm

لن يتم تقديم نموذج في مشروط افتراضيا، يمكنك الرجوع إلى @ se7en00 الصورة الرد و إضافة forceRender إلى مشروط. أو اتصل بـ setFieldsValue و resetFields بعد عرض Modal واكتمال العرض.

عند استخدام الإصدار V4 (النموذج موجود في مكون الوظيفة) ، كنت منزعجًا من هذه المشكلة لمدة يومين وكاد أن أعطل (تم الإبلاغ عن خطأ ولكن لم يؤثر على الاستخدام). أخيرًا ، قرأت https://ant.design / و https: // next .ant.design / اكتشف استخدام النموذج في مكونات الوظيفة ويجب أن تفهم الفئات وتميز بين مكونات الوظيفة
useEffect (() => {
العودة () => {
form.resetFields () ،
} ؛
})
إن مكون الوظيفة بأكمله هو الذي يؤدي إلى التدمير في المقابل () => {....} (لم يتم اختبار ما إذا كان النموذج قد تم إتلافه في هذا الوقت)
وصف المستند: التدميرOnClose | تدمير العناصر التابعة في Modal عند الإغلاق ، الافتراضي هو false. forceRender | التقديم الإلزامي لـ Modal ، default false.
الحل: ForceRender من Modal = صحيح ، تدمير OnClose = خطأ ، عندما يتم إتلاف Modal (مغلق) ، لن يتم الإبلاغ عن أي خطأ. يمكن العثور على النموذج عند تنفيذ الكود الداخلي ، ولكن سيتم الإبلاغ عن التحذير المتكرر لمعرف التحكم في الإدخال (وهو أكثر دقة من الخطأ).

نفس المشكلة +1

إذا كانت شفرتك تتضمن setFieldsValue أو وظائف أخرى على حد سواء ، فقم باستدعاءها بعد عرض العقد

useEffect(() => {
  form.setFieldsValue({
    id: 1
  })
}, [])

أو

componentDidMount() {
  form.setFieldsValue({
    id: 1
  })
}

لقد حل مشكلتي

أشعر أنه لا يمكن لأي مما سبق حل هذه المشكلة تمامًا. هل يمكنك إضافة سمة إلى النموذج للإشارة إلى ما إذا كان النموذج يحتوي على حقول ، والسماح للمطور نفسه بتحديد ما إذا كان سيتم تنفيذ التعليمات البرمجية التالية

يحدث الشيء نفسه هنا

لم يتم إصلاحه بعد؟

جربت جميع الطرق المذكورة أعلاه ، ولم تنجح

لن يتم تقديم نموذج في مشروط افتراضيا، يمكنك الرجوع إلى @ se7en00 الصورة الرد و إضافة forceRender إلى مشروط. أو اتصل بـ setFieldsValue و resetFields بعد عرض Modal واكتمال العرض.

عندما أستخدم الدرج ، على الرغم من أن الدرج يحتوي على واجهة برمجة تطبيقات forcerender ، فإن واجهة برمجة التطبيقات للدرج ، والتي تختلف عن Modal ، ليست عرضًا قسريًا ولكن عرضًا مسبقًا ، ومن ثم يتم الإبلاغ عن الخطأ نفسه ، فهل هناك حل؟ كيف نحكم على العرض كامل؟

لقد قمت بحلها. في الدرج ، استخدم getContainer = {false} يمكن حلها. أعتقد أن Modal هو نفسه.
أستخدم getContainer = {false} في الدرج. يجب أن يكون لدى Modal نفس المشكلة أيضًا. يمكنك المحاولة

يمكنك استخدام useRef لحفظ كائن النموذج ، ويمكنك تحديد ما إذا كان useRef موجودًا قبل استخدام النموذج ؛

نفس المشكلة هنا. تم تعيين النموذج ولكن استمر في الفشل.

إذا قمت باستدعاء form.setFieldsValue مباشرة في التأثير ، حتى إذا تمت إضافة forceRenter وإعادة فتح Modal ، فسيظل هناك هذا التحذير.يمكن فقط تعيين الحل المؤقت (() => form.setFieldsValue، 0) في التأثير.

لحل مشكلة الدرج ، استخدمت getContainer = {false} ولم أبلغ عن التحذير. في حالة حدوث نفس المشكلة ، يمكنك تجربتها وتأمل في إمكانية كتابتها بوضوح في مستند النموذج.

شكرا لك هذه الطريقة حلت نفس المشكلة 👍

طريقتك مجدية ، هل يمكنك شرح المبدأ؟

الحل الخاص بي هو إنشاء ref بواسطة useState عند عرض Form ، ثم تحقق من ref قبل استخدام مثيل النموذج.

interface FormModalProps {
  data?: RoleProps;
  visible: boolean;
  onCancel?: () => void;
  onSubmit?: (values: Store) => void;
  submitting: boolean;
}

const FormModal: React.FC<FormModalProps> = props => {
  const [form] = Form.useForm();
  const [formRef, setFormRef] = useState();  // <---- set the ref when Form Rendered

  const { data, onSubmit, onCancel, visible, submitting } = props;

  // reset Form when modal close
  useEffect(() => {
    if ( !props.visible && formRef) {  // <---- check ref before use the form instance
      form.resetFields();
    }
  }, [props.visible]);

  // fill Form when modal open
  useEffect(() => {
    if (visible && formRef) {   // <---- check ref before use the form instance
      form.setFieldsValue({
        ...data,
      });
    }
  }, [props.data]);

  // handle form onFinish
  const handleFormFinish = (values: Store) => {
    if (onSubmit) {
      onSubmit(values);
    }
  };

  // handle modal  ok
  const handleOk = () => {
    if (!form) return;
    form.submit();
  };

  return (
    <Modal
      title="Modal"
      confirmLoading={submitting}
      onOk={handleOk}
      onCancel={onCancel}
      visible={visible}
      width={640}
    >
      <Form ref={setFormRef} form={form} onFinish={handleFormFinish}>
        <Form.Item name="title" label="Title" >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

لا مزيد من التحذير مرة أخرى!

هل من الصعب مناقشتها بالإنجليزية؟

muhaimincs https://ant.design/components/form/#Why-is-there-a-form-warning-when-used-in-Modal

إذا كنت تستخدم setFieldsValue ، فربما حاول اتباع التعليمات البرمجية لتحل محل (فكرتي الحمقاء)。

<Modal        **destroyOnClose**      >
        <Form **initialValues={formValues}**>
        </Form>
</Modal>

لقد حصلت عليها تعمل.
في البداية كنت أسمي مكون antd كـ
<Form blabla >

ثم أضفت خاصية النموذج في مكون النموذج -

<Form form={form} blabla >

هنا يأتي {form} من const [form] = Form.useForm();

وثيقة (كنت أتابعها) -
https://ant.design/components/form/#components -form-demo-form-in-modal

قد تكون حالتك مختلفة.

https://codesandbox.io/s/form-in-modal-to-create-ant-design-demo-xvcyv
نفس المشكلة ، يمكن لأي شخص إصلاح ذلك ؟؟؟

راجع linxianxi أعلاه ، https://github.com/ant-design/ant-design/issues/21543#issuecomment -598515368

مشروط أستطيع

 <Modal
  destroyOnClose={false} 
  getContainer={false}
  forceRender
>

مشروط أستطيع

 <Modal
  destroyOnClose={false} 
  getContainer={false}
  forceRender
>

شكرًا لك ، لقد أصلحت هذه المشكلة عن طريق إضافة دعائم forceRender في Modal

    const [form] = Form.useForm()

    <Form form={form} >
     ....

    </Form>```


         this did the trick for me.

لقد حصلت عليها تعمل.
في البداية كنت أسمي مكون antd كـ
<Form blabla >

ثم أضفت خاصية النموذج في مكون النموذج -

<Form form={form} blabla >

هنا يأتي {form} من const [form] = Form.useForm();

وثيقة (كنت أتابعها) -
https://ant.design/components/form/#components -form-demo-form-in-modal

قد تكون حالتك مختلفة.

هذا أصلحه لي أيضا. كنت أستخدم النموذج في درج ، وليس مشروطًا

كان التحرير والسرد السري بالنسبة لي:

useEffect (() => {
إذا (الشكل && ظاهر) {
إذا (الحالية) {
setTimeout (() => form.setFieldsValue ({
...تيار،
}) ، 0) ؛
} آخر {
form.resetFields () ،
}
}
}، [تيار])؛

نفس الخطأ هنا بدون تمرير الخاصية المشروطة والنموذج إلى مكون النموذج
https://codesandbox.io/s/basic-usage-ant-design-demo-6llbw؟file=/index.js : 1618-1661

نفس الخطأ هنا بدون تمرير الخاصية المشروطة والنموذج إلى مكون النموذج
https://codesandbox.io/s/basic-usage-ant-design-demo-6llbw؟file=/index.js : 1618-1661

إصلاح لك: https://codesandbox.io/s/basic-usage-ant-design-demo-ksuz8؟

يجب عليك نقل form.getVieldValue إلى مكون Form.Item

        <Form.Item
          shouldUpdate={(prevValues, curValues) =>
            prevValues.username !== curValues.username
          }
          noStyle
        >
          {() => <div>{form.getFieldValue("username")}</div>}
        </Form.Item>

هناك طريقة أخرى وهي استخدام useRef ()

ارسم + نموذج.للشروط + النموذج ، يتم تطبيق الطريقة.

1. forceRender = true، destructionOnClose = false. إنه يعمل على أحد مكوناتي ولكنه لا يعمل على الآخر. أجد أنه بسبب الارتباط بين Form.Item ، فإن الكود الخاص بي هو

const MyComp = React.memo(() => {
     const [form] = Form.useForm();
     const { getFieldValue } = form;
     const category = getFieldValue('category'); // It's the culprit
     return (/* something */);
})

الاستخدام السليم: طرق النموذج

<Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
      >
        {({ getFieldValue }) => {
          return getFieldValue('gender') === 'other' ? (
            <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          ) : null;
        }}
 </Form.Item>

1. forceRender = true ، destructionOnClose = false. إنه يعمل على أحد مكوناتي ، لكنه لا يعمل على الآخر.لقد وجدت أنه بسبب الارتباط بين المكونات ، فإن الكود الخاص بي هو كما يلي

const MyComp = React.memo(() => {
     const [form] = Form.useForm();
     const { getFieldValue } = form;
     const category = getFieldValue('category'); // It's the culprit
     return (/* something */);
})

الطريقة الصحيحة لاستخدام: استدعاء طريقة النموذج

<Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
      >
        {({ getFieldValue }) => {
          return getFieldValue('gender') === 'other' ? (
            <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          ) : null;
        }}
 </Form.Item>

يحدث ذلك لأنه لم يتم تقديم عنصر النموذج ، ولكنك قمت بتعيين قيم للنموذج. أعتقد أن هذه هي المعرفة الأساسية حول التفاعل والخطافات .. يمكنك استخدام setTimeout لانتظار النموذج المقدم.

لكن أفضل طريقة لتحديد القيمة الأولية للشكل هي

<Form
   initialValues={{ 
      name: 'Hafid',
      age: '35'
}}
onFinish={onFinish}
>

أو بهذه الطريقة

شبيبة
const [القيم ، setValues] = React.useState ({})

React.useEffect (() => {
// الحصول على قيم البيانات من خدمة الويب أو واجهة برمجة التطبيقات
// fecth (...)
إذا (قيم_فروم_ابي) {
setValues ​​(values_from_api) ؛
}
} ، [])

العودة <>

ماذا لو كنت بحاجة إلى استخدام قيم النموذج في الخطاف المخصص الخاص بي؟
مع Ant 3 فعلت ذلك على هذا النحو:

const [updating, updateInfo] = useMyOwnCustomHookForSubmitAction(getFieldsValue());

const submitForm = () => {
   validateFields((err) => {
        if (!err) updateInfo();
   });
};

<Form>...</Form>

مع Ant 4 إذا حاولت القيام بذلك على هذا النحو ، فسأحصل على هذا الخطأ من الموضوع.

const [form] = useForm();
const [updating, updateInfo] = useMyOwnCustomHookForSubmitAction(getFieldsValue());

const submitForm = () => {
   validateFields((err) => {
        if (!err) updateInfo();
   });
};

<Form form={form}>...</Form>

النموذج مشروط ، forceRender = true ، destructionOnClose = false set. ما الخطأ الذي افعله؟

عند استخدام الإصدار V4 (النموذج موجود في مكون الوظيفة) ، كنت منزعجًا من هذه المشكلة لمدة يومين ، وكاد أن أعطل (تم الإبلاغ عن خطأ ولكن لم يؤثر على الاستخدام). أخيرًا ، قرأت https: // ant. design / and https: // next. .ant.design / اكتشف استخدام النموذج في مكونات الوظيفة ويجب أن تفهم الفئات وتميز بين مكونات الوظيفة
useEffect (() => {
العودة () => {
form.resetFields () ،
} ؛
})
إن مكون الوظيفة بأكمله هو الذي يؤدي إلى التدمير في المقابل () => {....} (لم يتم اختبار ما إذا كان النموذج قد تم إتلافه في هذا الوقت)
وصف المستند: التدميرOnClose | تدمير العناصر التابعة في Modal عند الإغلاق ، الافتراضي هو false. forceRender | التقديم الإلزامي لـ Modal ، default false.
الحل: ForceRender من Modal = صحيح ، تدمير OnClose = خطأ ، عندما يتم إتلاف Modal (مغلق) ، لن يتم الإبلاغ عن أي خطأ. يمكن العثور على النموذج عند تنفيذ الكود الداخلي ، ولكن سيتم الإبلاغ عن التحذير المتكرر لمعرف التحكم في الإدخال (وهو أكثر دقة من الخطأ).

لقد واجهت هذه المشكلة أيضًا ، لقد قمت بحلها بهذه الطريقة
قوة التكوين المشروط | التقديم القسري
في نموذج Modla ، الاسم = {['modal'، 'cityCode']}
الاسم = {['search'، 'cityCode']} أو name = 'cityCode' في نموذج الفلتر
بهذه الطريقة ، يمكن حل جميع التحذيرات ولن يتم الإبلاغ عن العناصر الموجودة 2 مع تحذير معرف غير فريد ⚠

يمكنك استخدام useRef للإشارة إلى مرجع النموذج ، استخدم الطريقة في formRef.current

const formRef = useRef()

return (<Form ref={formRef}>
  {
    (formRef.current && formRef.current.getFieldsValue('key') === 1) 
     &&
   (<Input />)
  }
</Form>)

لن يتم تقديم نموذج في مشروط افتراضيا، يمكنك الرجوع إلى @ se7en00 الصورة الرد و إضافة forceRender إلى مشروط. أو اتصل بـ setFieldsValue و resetFields بعد عرض Modal واكتمال العرض.

إضافة خاصية forceRender إلى Modal غير مجدية على الإطلاق

كما يحذر المثال في الكتلة الرسمية

عند استخدام الإصدار V4 (النموذج موجود في مكون الوظيفة) ، كنت منزعجًا من هذه المشكلة لمدة يومين ، وكاد أن أعطل (تم الإبلاغ عن خطأ ولكن لم يؤثر على الاستخدام). أخيرًا ، قرأت https: // ant. design / and https: // next. .ant.design / اكتشف استخدام النموذج في مكونات الوظيفة ويجب أن تفهم الفئات وتميز بين مكونات الوظيفة
useEffect (() => {
العودة () => {
form.resetFields () ،
} ؛
})
إن مكون الوظيفة بأكمله هو الذي يؤدي إلى التدمير في المقابل () => {....} (لم يتم اختبار ما إذا كان النموذج قد تم إتلافه في هذا الوقت)
وصف المستند: التدميرOnClose | تدمير العناصر التابعة في Modal عند الإغلاق ، الافتراضي هو false. forceRender | التقديم الإلزامي لـ Modal ، default false.
الحل: ForceRender من Modal = صحيح ، تدمير OnClose = خطأ ، عندما يتم إتلاف Modal (مغلق) ، لن يتم الإبلاغ عن أي خطأ. يمكن العثور على النموذج عند تنفيذ الكود الداخلي ، ولكن سيتم الإبلاغ عن التحذير المتكرر لمعرف التحكم في الإدخال (وهو أكثر دقة من الخطأ).

يمكن حل هذه الطريقة ، ولكن إذا كان العامل الثلاثي مرئيًا ، يتم استخدامه لتحديد الطبقة الخارجية من Modal و forceRender = true ، تدميرOnClose = false مثل هذا:
{visible ? : <Modal visible={visible} forceRender destroyOnClose={false}><Form form={form} onFinish={handleFinish}>...</Form></Modal> : null}
توجد مشكلة: يتم عرض القناع فقط ، ولكن لا يتم عرض مربع الرمز النقطي

اضبط forceRender = true و destructionOnClose = false بهذه الطريقة ، ثم استخدم form.resetFields () عند إغلاق النافذة المنبثقة onOk أو onCancel ، ولن يتم الإبلاغ عن المزيد من الأخطاء.
<Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal>
ولكن إذا كنت تستخدم العامل الثلاثي المرئي؟ لتحديد الطبقة الخارجية للشروط وضبط forceRender = true ،
{visible ? <Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal> : null }
توجد مشكلة: يتم عرض القناع فقط ، ولكن لا يتم عرض مربع الرمز النقطي

الحل الرسمي

وصلة

عند استخدام الإصدار V4 (النموذج موجود في مكون الوظيفة) ، كنت منزعجًا من هذه المشكلة لمدة يومين ، وكاد أن أعطل (تم الإبلاغ عن خطأ ولكن لم يؤثر على الاستخدام). أخيرًا ، قرأت https: // ant. design / and https: // next. .ant.design / اكتشف استخدام النموذج في مكونات الوظيفة ويجب أن تفهم الفئات وتميز بين مكونات الوظيفة
useEffect (() => {
العودة () => {
form.resetFields () ،
} ؛
})
إن مكون الوظيفة بأكمله هو الذي يؤدي إلى التدمير في المقابل () => {....} (لم يتم اختبار ما إذا كان النموذج قد تم إتلافه في هذا الوقت)
وصف المستند: التدميرOnClose | تدمير العناصر التابعة في Modal عند الإغلاق ، الافتراضي هو false. forceRender | التقديم الإلزامي لـ Modal ، default false.
الحل: ForceRender من Modal = صحيح ، تدمير OnClose = خطأ ، عندما يتم إتلاف Modal (مغلق) ، لن يتم الإبلاغ عن أي خطأ. يمكن العثور على النموذج عند تنفيذ الكود الداخلي ، ولكن سيتم الإبلاغ عن التحذير المتكرر لمعرف التحكم في الإدخال (وهو أكثر دقة من الخطأ).

لقد واجهت هذه المشكلة أيضًا ، لقد قمت بحلها بهذه الطريقة
قوة التكوين المشروط | التقديم القسري
في نموذج Modla ، الاسم = {['modal'، 'cityCode']}
الاسم = {['search'، 'cityCode']} أو name = 'cityCode' في نموذج الفلتر
بهذه الطريقة ، يمكن حل جميع التحذيرات ولن يتم الإبلاغ عن العناصر الموجودة 2 مع تحذير معرف غير فريد ⚠

[سيتم استخدام اسم النموذج كبادئة لمعرف حقل النموذج] لذلك لا يوجد تحذير بشأن العثور على عنصرين لهما معرف غير فريد

getContainer = {false} كخاصية مشروطة + وجود الحالة المرئية عند استدعاء form.resetFields () يعمل بالنسبة لي لعدم إظهار التحذير

useEffect(() => {
    if (form && visible) {
      form.resetFields();
    }
  }, [visible]);

وبهذه الطريقة ، يمكن أن تكون خاصية التدمير أونكلوز صحيحة أيضًا

أستخدم useRef بدلاً من Form.use من للحصول على مثيل Form ، فهو يعمل بالنسبة لي

  const [visible, setVisible] = useState(false)

  let form = useRef(null)

  const closeModal = () => {
    setVisible(false)
    form.resetFields()
  }

  return (
    <Modal
      title="test"
      visible={visible}
      onCancel={closeModal}
      footer={null}
    >
      <Form
        name="test"
        layout="vertical"
        onFinish={onFinish}
        ref={instance => { form = instance }}
      >
        <Form.Item
          label="item"
          name="item"
        >
          <Input />
        </Form.Item>
        <Form.Item
          style={{
            textAlign: 'right',
          }}
        >
          <Space size="middle">
            <Button type="primary" htmlType="submit">
             submit
            </Button>
            <Button onClick={closeModal}>
             cancle
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
)

فقط سنتان: ظهر هذا الخطأ بالنسبة لي عندما حاولت إعادة تعيين نموذج لم يتم تركيبه ، لذا فإن إضافة تبعية إلى الثابت المطلوب حلها.

useEffect(() => {
  if (data) { // data is used to populate initialValues
    form.resetFields();
  }
}, [form, data])

تحرير: إلى حد كبير ما قاله @ fabripeco : د

أستخدم نموذجًا في Popover ، useRef قابل للاستخدام بالنسبة لي ، أعتقد أنه قابل للاستخدام في الوسائط

const formRef = useRef(null);

<Popover
  content={renderEdit()}
  visible={isEdit}
  onVisibleChange={onToggleEdit}
>
  <span onClick={onToggleEdit}>
    {name}
  </span>
</Popover>

function renderEdit() {
  return (
    <Form
      initialValues={{ newName: name }}
      form={form}
      ref={formRef}
    >
    </Form>
  );
}

function onToggleEdit() {
  if (isEdit) {
    toggleEdit(false);
  } else if (!isEdit) {
    if (formRef.current) {
      form.setFieldsValue({
        newName: name
      });
    }
    toggleEdit(true);
  }
}

الحل الخاص بي هو إنشاء ref بواسطة useState عند عرض Form ، ثم تحقق من ref قبل استخدام مثيل النموذج.

interface FormModalProps {
  data?: RoleProps;
  visible: boolean;
  onCancel?: () => void;
  onSubmit?: (values: Store) => void;
  submitting: boolean;
}

const FormModal: React.FC<FormModalProps> = props => {
  const [form] = Form.useForm();
  const [formRef, setFormRef] = useState();  // <---- set the ref when Form Rendered

  const { data, onSubmit, onCancel, visible, submitting } = props;

  // reset Form when modal close
  useEffect(() => {
    if ( !props.visible && formRef) {  // <---- check ref before use the form instance
      form.resetFields();
    }
  }, [props.visible]);

  // fill Form when modal open
  useEffect(() => {
    if (visible && formRef) {   // <---- check ref before use the form instance
      form.setFieldsValue({
        ...data,
      });
    }
  }, [props.data]);

  // handle form onFinish
  const handleFormFinish = (values: Store) => {
    if (onSubmit) {
      onSubmit(values);
    }
  };

  // handle modal  ok
  const handleOk = () => {
    if (!form) return;
    form.submit();
  };

  return (
    <Modal
      title="Modal"
      confirmLoading={submitting}
      onOk={handleOk}
      onCancel={onCancel}
      visible={visible}
      width={640}
    >
      <Form ref={setFormRef} form={form} onFinish={handleFormFinish}>
        <Form.Item name="title" label="Title" >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

لا مزيد من التحذير مرة أخرى!

تم حلها بشكل مثالي!

سببان لهذا التحذير ：
1.+

أنا حل استخدام هذا:

<Modal
        getContainer={false}
        // destroyOnClose
>

الحل الرسمي

وصلة

ممتاز ، أضف ForceRender إلى الوسائط

لماذا لا تكشف عن formHooked وتسمح للمستخدمين بالحكم على أنفسهم ، ألا تشعر بالتعب من الأساليب المذكورة أعلاه للتجول؟