Ant-design: Die von `useForm` erstellte Instanz ist mit keinem Form-Element verbunden. Vergessen Sie `form` prop zu übergeben? Offensichtlich folgt es dem Beispiel.

Erstellt am 23. Feb. 2020  ·  56Kommentare  ·  Quelle: ant-design/ant-design

  • [] Ich habe die Ausgaben dieses Repositorys durchsucht und glaube, dass dies kein Duplikat ist.

Reproduktionslink

https://next.ant.design/components/form-cn/#components -form-demo-form-in-modal

Schritte zum Reproduzieren

Verwenden Sie einfach useForm direkt. Ich verweise auf das Beispiel in der Popup-Ebene.

const CollectionCreateForm = ({ onCancel }) => {
const [form] = Form.useForm();
form.setFieldsValue({
Kategoriename: caseDetail.categoryName,
});
Rückkehr (
sichtbar={sichtbar}
maskClosable={false}
title="Grundlegende Informationen des Projekts ändern"
okText="OK"
cancelText="Abbrechen"
onCancel={onCancel}
onOk={() => {
Form
.validateFields()
.dann(Werte => {
form.resetFields();
onCreate(Werte);
})
.catch(info => {
window.console.log('Validieren fehlgeschlagen:', info);
});
}}
>

form={form}
Layout="vertikal"
name="form_in_modal"
initialValues={{
Modifikator:'öffentlich',
}}
>



name="titel"
label="Titel"
Regeln={[
{
erforderlich: wahr,-
Nachricht:'Bitte geben Sie den Titel der Sammlung ein!',
},
]}
>







);
};

Was wird erwartet?

Ich möchte dieses useForm einfach normal verwenden können

Was passiert eigentlich?

index.js:1 Warnung: Von useForm erstellte Instanz ist mit keinem Formularelement verbunden. Vergessen Sie form prop zu übergeben?
in CollectionCreateForm ....

const [form] = Form.useForm();
form.setFieldsValue({
Kategoriename: caseDetail.categoryName,
});

form={form}
Layout="vertikal"
name="form_in_modal"
initialValues={{
Modifikator:'öffentlich',
}}
>

| Umwelt | Infos |
|---|---|
| antd | 4.0.0-rc.5 |
| Reagieren | 16.8.6 |
| System | mac10.15.3 |
| Browser | Chrom |


Ich bin direkt auf die offizielle Webseite gekommen, aber dieser Fehler wurde überall gemeldet und ich war sprachlos.

❓FAQ

Hilfreichster Kommentar

Ich habe es gelöst. In der Schublade verwenden Sie getContainer = {false}, um es aufzulösen. Ich denke, Modal ist dasselbe.
Ich benutze getContainer={false} in der Schublade. Modal sollte auch das gleiche Problem haben. Du kannst es versuchen

Alle 56 Kommentare

image

Hallo @LamTech. Bitte stellen Sie eine Online-Reproduktion bereit, indem Sie diesen Link https://u.ant.design/codesandbox-repro oder ein minimales GitHub-Repository verwenden. Probleme, die mit Need Reproduce sind, werden geschlossen, wenn in 7 Tagen keine Aktivitäten stattfinden. .

Hallo @LamTech , wir brauchen Sie, um ein bereitzustellen , damit wir Ihnen bei der hier klicken zu erstellen oder ein minimales GitHub-Repository bereitzustellen. Probleme, die nicht innerhalb von 7 Tagen bearbeitet werden, werden automatisch geschlossen.

Der Schlüssel ist, dass ich diese Methode verwende, aber diese Fehlerwarnung wird weiterhin gemeldet.

Gleiches Problem hier, aber es kann nicht auf Codesandbox reproduziert werden.

+1

Fügen Sie das forceRender-Attribut zu Modal hinzu

Sie können der setFieldsValue-Methode eine Verzögerung hinzufügen

Rufen Sie form.resetFields() auf; es sieht so aus. Der lokal gestartete http://localhost :8001/components/form-cn/#components-form-demo-form-context wird gemeldet.

+1
Diese Warnung wird angezeigt, wenn setFieldsValue verwendet wird, aber sie kann reibungslos dargestellt werden,
Ich habe die Instanz von useForm übergeben

Das Formular in Modal wird standardmäßig nicht gerendert, Sie können sich auf die Antwort von @se7en00 beziehen und forceRender zu Modal hinzufügen. Oder rufen Sie setFieldsValue und resetFields nachdem Modal angezeigt wird und das Rendern abgeschlossen ist.

Bei der Verwendung der Version V4 (Formular ist in der Funktionskomponente vorhanden) wurde ich zwei Tage von diesem Problem geplagt und wäre fast abgestürzt (ein Fehler wurde gemeldet, hatte aber keinen Einfluss auf die Nutzung) Schließlich las ich https://ant.design / und https://next.ant.design/Entdecken Sie die Verwendung von Formularen in Funktionskomponenten und Klassen müssen Funktionskomponenten verstehen und unterscheiden
useEffect(() => {
zurück () => {
form.resetFields();
};
})
Es ist die gesamte Funktionskomponente, die im Return ()=>{....} die Zerstörung auslöst (nicht getestet, ob das Formular zu diesem Zeitpunkt zerstört wird)
Dokumentbeschreibung: DestroyOnClose | Zerstöre die untergeordneten Elemente im Modal beim Schließen, der Standardwert ist false. forceRender | Obligatorisches Rendering von Modal, Standardwert false.
Lösung: Modals forceRender=true, DestroyOnClose=false, wenn Modal zerstört (geschlossen) wird, wird kein Fehler gemeldet. Das Formular kann gefunden werden, wenn der interne Code ausgeführt wird, aber die wiederholte Warnung der Eingabekontroll-ID wird gemeldet (es ist eleganter als der Fehler).

Gleiches Problem +1

Wenn Ihr Code setFieldsValue oder andere Funktionen umfasst, rufen Sie ihn nach gerenderten Knoten auf

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

oder

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

Es hat mein Problem gelöst

Ich denke, dass keine der oben genannten Methoden dieses Problem vollständig lösen kann. Können Sie dem Formular ein Attribut hinzufügen, um anzugeben, ob das Formular Felder enthält, und den Entwickler selbst bestimmen lassen, ob der folgende Code ausgeführt werden soll?

Das gleiche passiert hier

Noch nicht behoben?

Habe alle oben genannten Methoden ausprobiert, es hat nicht funktioniert

Das Formular in Modal wird standardmäßig nicht gerendert, Sie können sich auf die Antwort von @se7en00 beziehen und forceRender zu Modal hinzufügen. Oder rufen Sie setFieldsValue und resetFields nachdem Modal angezeigt wird und das Rendern abgeschlossen ist.

Wenn ich die Schublade verwende, obwohl die Schublade die Forcerender-API hat, ist die API der Schublade, die sich von Modal unterscheidet, kein erzwungenes Rendering, sondern ein Vorrendern, und dann wird der gleiche Fehler gemeldet. Gibt es also eine Lösung? Wie kann man beurteilen, ob das Rendering vollständig ist?

Ich habe es gelöst. In der Schublade verwenden Sie getContainer = {false}, um es aufzulösen. Ich denke, Modal ist dasselbe.
Ich benutze getContainer={false} in der Schublade. Modal sollte auch das gleiche Problem haben. Du kannst es versuchen

Sie können useRef verwenden, um das Form-Objekt zu speichern, und Sie können feststellen, ob die useRef vorhanden ist, bevor Sie das Formular verwenden.

selbes Problem hier. Formular ist zugewiesen, schlägt aber weiterhin fehl.

Wenn Sie form.setFieldsValue direkt im Effect aufrufen, kommt es auch beim Hinzufügen von forceRenter und erneutem Öffnen von Modal zu dieser Warnung Die temporäre Lösung kann nur setTimeout(() => form.setFieldsValue, 0) im Effect sein.

Um das Problem der Schublade zu lösen, habe ich getContainer={false} verwendet und die Warnung nicht gemeldet.Wenn das gleiche Problem auftritt, können Sie es versuchen und hoffen, dass es im Formulardokument klar geschrieben werden kann.

Danke, diese Methode hat das gleiche Problem gelöst 👍

Ihre Methode ist machbar, können Sie das Prinzip erklären?

Meine Problemumgehung: Erstellen Sie ein ref von useState wenn Form gerendert wurde, und überprüfen Sie dann das ref bevor Sie die Formularinstanz verwenden.

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>
  );
};

Keine Warnung mehr!

Ist es schwer, auf Englisch zu diskutieren?

Wenn Sie setFieldsValue verwenden, versuchen Sie vielleicht den folgenden Code zum Ersetzen (meine dumme Idee)。

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

Ich habe es zum Laufen gebracht.
Anfangs habe ich die antd-Komponente aufgerufen als
<Form blabla >

Ich habe dann die Form-Requisite in der Form-Komponente hinzugefügt -

<Form form={form} blabla >

Hier kommt die {form} von const [form] = Form.useForm();

Doc (dem ich gefolgt bin) -
https://ant.design/components/form/#components -form-demo-form-in-modal

Ihr Fall könnte anders aussehen.

https://codesandbox.io/s/form-in-modal-to-create-ant-design-demo-xvcyv
Gleiches Problem, kann jeder Körper das beheben???

Siehe linxianxi oben, https://github.com/ant-design/ant-design/issues/21543#issuecomment -598515368

Modal ich kann

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

Modal ich kann

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

Danke, ich habe dieses Problem behoben, indem ich forceRender-Requisiten in Modal hinzugefügt habe

    const [form] = Form.useForm()

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

    </Form>```


         this did the trick for me.

Ich habe es zum Laufen gebracht.
Anfangs habe ich die antd-Komponente aufgerufen als
<Form blabla >

Ich habe dann die Form-Requisite in der Form-Komponente hinzugefügt -

<Form form={form} blabla >

Hier kommt die {form} von const [form] = Form.useForm();

Doc (dem ich gefolgt bin) -
https://ant.design/components/form/#components -form-demo-form-in-modal

Ihr Fall könnte anders aussehen.

Das hat es bei mir auch behoben. Ich habe das Formular in einer Schublade verwendet, nicht in einem Modal

Die geheime Kombination für mich war:

useEffect(() => {
if (Formular && sichtbar) {
wenn (aktuell) {
setTimeout (() => form.setFieldsValue({
...aktuell,
}), 0);
} anders {
form.resetFields();
}
}
}, [aktuell]);

Gleicher Fehler hier ohne Modal- und Formularprop-Übergabe an die Formularkomponente
https://codesandbox.io/s/basic-usage-ant-design-demo-6llbw?file=/index.js :1618-1661

Gleicher Fehler hier ohne Modal- und Formularprop-Übergabe an die Formularkomponente
https://codesandbox.io/s/basic-usage-ant-design-demo-6llbw?file=/index.js :1618-1661

Fix für Ihre: https://codesandbox.io/s/basic-usage-ant-design-demo-ksuz8?file=/index.js

Sie sollten form.getVieldValue in eine Form.Item-Komponente verschieben

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

Eine andere Methode wäre die Verwendung eines useRef()

Draw + Form Für Modal + Form gilt die Methode.

  1. forceRender=true, DestroyOnClose=false. Es funktioniert bei einer meiner Komponenten, aber es funktioniert nicht bei der anderen. Ich finde, dass mein Code aufgrund der Verknüpfung zwischen Form.Item ist
const MyComp = React.memo(() => {
     const [form] = Form.useForm();
     const { getFieldValue } = form;
     const category = getFieldValue('category'); // It's the culprit
     return (/* something */);
})

Bestimmungsgemäße Verwendung: Formularmethoden

<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, DestroyOnClose=false Es funktioniert bei einer meiner Komponenten, aber bei der anderen nicht.Ich habe festgestellt, dass mein Code aufgrund der Verknüpfung zwischen Komponenten wie folgt lautet:
const MyComp = React.memo(() => {
     const [form] = Form.useForm();
     const { getFieldValue } = form;
     const category = getFieldValue('category'); // It's the culprit
     return (/* something */);
})

Die richtige Verwendung: Aufruf von Formularmethoden

<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>

Dies geschieht, weil Formularelemente nicht gerendert wurden, Sie jedoch Werte für das Formular festgelegt haben. Ich denke, dies ist grundlegendes Wissen über Reagieren und Hooks. Sie können setTimeout verwenden, um auf gerenderte Formulare zu warten.

Aber der beste Weg, den Anfangswert der Form festzulegen, ist

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

oder mit dieser Methode

```js
const [values, setValues] = React.useState({})

React.useEffect(()=>{
// Datenwerte vom Webservice oder der API abrufen
// fehler(...)
if (values_from_api){
setValues(values_from_api);
}
}, [])

zurück <>

initialValues={values}
onFinish={onFinish}
>

Was ist, wenn ich Formularwerte in meinem eigenen benutzerdefinierten Hook verwenden muss?
Bei Ant 3 habe ich es so gemacht:

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

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

<Form>...</Form>

Mit Ant 4 bekomme ich diesen Fehler aus dem Thema, wenn ich es so versuche.

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

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

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

Form ist in Modal, forceRender=true, DestroyOnClose=false gesetzt. Was mache ich falsch?

Bei der Verwendung der Version V4 (Formular ist in der Funktionskomponente vorhanden) wurde ich zwei Tage lang von diesem Problem geplagt und wäre fast abgestürzt (ein Fehler wurde gemeldet, hatte aber keinen Einfluss auf die Verwendung) Schließlich las ich https://ant. design/ und https://next.ant.design/Entdecken Sie die Verwendung von Formularen in Funktionskomponenten und Klassen müssen Funktionskomponenten verstehen und unterscheiden
useEffect(() => {
zurück () => {
form.resetFields();
};
})
Es ist die gesamte Funktionskomponente, die im Return ()=>{....} die Zerstörung auslöst (nicht getestet, ob das Formular zu diesem Zeitpunkt zerstört wird)
Dokumentbeschreibung: DestroyOnClose | Zerstöre die untergeordneten Elemente im Modal beim Schließen, der Standardwert ist false. forceRender | Obligatorisches Rendering von Modal, Standardwert false.
Lösung: Modals forceRender=true, DestroyOnClose=false, wenn Modal zerstört (geschlossen) wird, wird kein Fehler gemeldet. Das Formular kann gefunden werden, wenn der interne Code ausgeführt wird, aber die wiederholte Warnung der Eingabekontroll-ID wird gemeldet (es ist eleganter als der Fehler).

Ich bin auch auf dieses Problem gestoßen, ich habe es so gelöst
Modale Konfiguration forceRender | Erzwungenes Rendering
Im Modla-Formular name={['modal','cityCode']}
Name={['search','cityCode']} oder name='cityCode' im Filterformular
Auf diese Weise können alle Warnungen behoben werden und die Gefunden 2 Elemente mit nicht eindeutiger ID-Warnung werden nicht gemeldet ⚠

Sie können useRef verwenden, um auf die Referenz des Formulars zu verweisen, verwenden Sie die Methode in formRef.current

const formRef = useRef()

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

Das Formular in Modal wird standardmäßig nicht gerendert, Sie können sich auf die Antwort von @se7en00 beziehen und forceRender zu Modal hinzufügen. Oder rufen Sie setFieldsValue und resetFields nachdem Modal angezeigt wird und das Rendern abgeschlossen ist.

Das Hinzufügen des Attributs forceRender zu Modal ist überhaupt nutzlos

Das Beispiel im offiziellen Block warnt auch

Bei der Verwendung der Version V4 (Formular ist in der Funktionskomponente vorhanden) wurde ich zwei Tage lang von diesem Problem geplagt und wäre fast abgestürzt (ein Fehler wurde gemeldet, hatte aber keinen Einfluss auf die Verwendung) Schließlich las ich https://ant. design/ und https://next.ant.design/Entdecken Sie die Verwendung von Formularen in Funktionskomponenten und Klassen müssen Funktionskomponenten verstehen und unterscheiden
useEffect(() => {
zurück () => {
form.resetFields();
};
})
Es ist die gesamte Funktionskomponente, die im Return ()=>{....} die Zerstörung auslöst (nicht getestet, ob das Formular zu diesem Zeitpunkt zerstört wird)
Dokumentbeschreibung: DestroyOnClose | Zerstöre die untergeordneten Elemente im Modal beim Schließen, der Standardwert ist false. forceRender | Obligatorisches Rendering von Modal, Standardwert false.
Lösung: Modals forceRender=true, DestroyOnClose=false, wenn Modal zerstört (geschlossen) wird, wird kein Fehler gemeldet. Das Formular kann gefunden werden, wenn der interne Code ausgeführt wird, aber die wiederholte Warnung der Eingabekontroll-ID wird gemeldet (es ist eleganter als der Fehler).

Diese Methode kann gelöst werden, aber wenn der ternäre Operator sichtbar? verwendet wird, um die äußere Schicht von Modal und forceRender=true zu bestimmen, ist DestroyOnClose=false wie folgt:
{visible ? : <Modal visible={visible} forceRender destroyOnClose={false}><Form form={form} onFinish={handleFinish}>...</Form></Modal> : null}
Es gibt ein Problem: Es wird nur die Maske angezeigt, aber die Bulletbox wird nicht angezeigt

Setzen Sie forceRender=true und DestroyOnClose=false auf diese Weise und verwenden Sie dann form.resetFields(), wenn das Popup onOk oder onCancel geschlossen wird und keine Fehler mehr gemeldet werden.
<Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal>
Aber wenn Sie den ternären Operator "visual?" verwenden, um die äußere Schicht von Modal zu bestimmen und forceRender=true zu setzen, zerstören Sie "destructOnClose=false" wie folgt:
{visible ? <Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal> : null }
Es gibt ein Problem: Es wird nur die Maske angezeigt, aber die Bulletbox wird nicht angezeigt

Die offizielle Lösung
image
Verknüpfung

Bei der Verwendung der Version V4 (Formular ist in der Funktionskomponente vorhanden) wurde ich zwei Tage lang von diesem Problem geplagt und wäre fast abgestürzt (ein Fehler wurde gemeldet, hatte aber keinen Einfluss auf die Verwendung) Schließlich las ich https://ant. design/ und https://next.ant.design/Entdecken Sie die Verwendung von Formularen in Funktionskomponenten und Klassen müssen Funktionskomponenten verstehen und unterscheiden
useEffect(() => {
zurück () => {
form.resetFields();
};
})
Es ist die gesamte Funktionskomponente, die im Return ()=>{....} die Zerstörung auslöst (nicht getestet, ob das Formular zu diesem Zeitpunkt zerstört wird)
Dokumentbeschreibung: DestroyOnClose | Zerstöre die untergeordneten Elemente im Modal beim Schließen, der Standardwert ist false. forceRender | Obligatorisches Rendering von Modal, Standardwert false.
Lösung: Modals forceRender=true, DestroyOnClose=false, wenn Modal zerstört (geschlossen) wird, wird kein Fehler gemeldet. Das Formular kann gefunden werden, wenn der interne Code ausgeführt wird, aber die wiederholte Warnung der Eingabekontroll-ID wird gemeldet (es ist eleganter als der Fehler).

Ich bin auch auf dieses Problem gestoßen, ich habe es so gelöst
Modale Konfiguration forceRender | Erzwungenes Rendering
Im Modla-Formular name={['modal','cityCode']}
Name={['search','cityCode']} oder name='cityCode' im Filterformular
Auf diese Weise können alle Warnungen behoben werden und die Gefunden 2 Elemente mit nicht eindeutiger ID-Warnung werden nicht gemeldet ⚠

[Der Name des Formulars wird als Präfix der Formularfeld-ID verwendet] Es gibt also keine Warnung über Found 2 Elemente mit nicht eindeutiger ID

getContainer={false} als modale Eigenschaft + das Modal sichtbar zu machen, wenn ich form.resetFields() aufrufe, funktioniert für mich, um die Warnung nicht anzuzeigen

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

Auf diese Weise kann DestroyOnClose auch wahr sein

Ich verwende useRef anstelle von Form.useFrom, um die Form-Instanz zu erhalten, es funktioniert für mich

  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>
)

Nur meine zwei Cent: Dieser Fehler trat bei mir auf, als ich versuchte, ein nicht gemountetes Formular zurückzusetzen. Das Hinzufügen einer Abhängigkeit zu einer erforderlichen Konstanten löste es also.

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

EDIT: so ziemlich das, was @fabripeco gesagt hat :D

Ich benutze Formular in Popover, useRef ist für mich verwendbar, ich denke, es ist für Modal geeignet

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);
  }
}

Meine Problemumgehung: Erstellen Sie ein ref von useState wenn Form gerendert wurde, und überprüfen Sie dann das ref bevor Sie die Formularinstanz verwenden.

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>
  );
};

Keine Warnung mehr!

perfekt gelöst!

Zwei Gründe für diese Warnung:
1.+
2."form.setFields()" oder andere Funktion in useEffect()

Ich löse dies:

<Modal
        getContainer={false}
        // destroyOnClose
>

Die offizielle Lösung
image
Verknüpfung

Perfekt, füge forceRender dem Modal hinzu

Warum entlarven Sie nicht formHooked und lassen Sie die Benutzer selbst beurteilen, fühlen Sie sich nicht müde von den oben genannten Methoden, herumzulaufen?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen