Ant-design: 'useForm'에 의해 생성된 인스턴스는 어떤 Form 요소에도 연결되지 않습니다. 'form' prop을 전달하는 것을 잊으셨습니까? 분명히 예를 따릅니다.

@LamTech님, 안녕하세요. https://u.ant.design/codesandbox-repro 또는 최소한의 GitHub 저장소를 분기하여 온라인 복제를 제공하세요. Need Reproduce 레이블이 지정된 문제는 7일 동안 활동이 없으면 종료됩니다. .

@LamTech님 , 안녕하세요. 문제를 해결하는 데 도움이 될 수 있도록 여기를 클릭하여 코드샌드박스

핵심은 이 방법을 사용하지만 이 오류 경고를 계속 보고한다는 것입니다.

여기에서도 동일한 문제가 있지만 코드샌드박스에서 재현하지 마십시오.

+1

모달에 forceRender 속성 추가

setFieldsValue 메서드에 지연을 추가할 수 있습니다.

form.resetFields()를 호출하면 다음과 같습니다. 로컬에서 시작된 http://localhost :8001/components/form-cn/#components-form-demo-form-context가 보고됩니다.

+1
이 경고는 setFieldsValue를 사용할 때 표시되지만 원활하게 표시될 수 있습니다.
useForm의 인스턴스를 전달했습니다.

Modal의 Form은 기본적으로 렌더링되지 않습니다. @se7en00님 의 답글을 참고하여 Modal에 forceRender 를 추가 하시면 됩니다. 또는 Modal이 표시되고 렌더링이 완료된 후 setFieldsValue 및 resetFields 호출합니다.

V4 버전 사용시(함수 컴포넌트에 형태가 존재함) 이 문제로 이틀동안 고민하다가 거의 다운될 뻔 했습니다(오류가 발생했지만 사용에는 지장이 없었습니다) 마지막으로 https://ant.design 을 읽었습니다. / 및 https://next.ant.design/Discover 함수 구성 요소 및 클래스에서 형식 사용을 이해하고 함수 구성 요소를 구별해야 합니다.
useEffect(() => {
반환() => {
form.resetFields();
};
})
반환()=>{....}에서 소멸을 유발하는 것은 전체 함수 구성 요소입니다(현재 양식이 소멸되는지 여부는 테스트되지 않음).
문서 설명: destroyOnClose | 닫을 때 모달의 자식 요소를 파괴합니다. 기본값은 false입니다. forceRender | Modal의 필수 렌더링, 기본값은 false입니다.
솔루션: Modal의 forceRender=true, destroyOnClose=false, Modal이 소멸(닫힘)되면 오류가 보고되지 않습니다. 양식은 내부 코드가 실행될 때 찾을 수 있지만 입력 제어 ID 반복 경고가 보고됩니다(오류보다 우아함).

같은 문제 +1

코드에 setFieldsValue 또는 기타 기능이 포함된 경우 노드가 렌더링된 후에 호출하십시오.

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

또는

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

내 문제를 해결했습니다.

위의 어느 것도 이 문제를 완전히 해결할 수는 없다고 생각합니다. 양식에 속성을 추가하여 양식에 필드가 있는지 여부를 표시하고 개발자가 다음 코드를 실행할지 여부를 직접 결정하도록 할 수 있습니까?

여기서도 마찬가지

아직 고정되지 않았나요?

위에서 언급한 모든 방법을 시도했지만 작동하지 않았습니다

Modal의 Form은 기본적으로 렌더링되지 않습니다. @se7en00님 의 답글을 참고하여 Modal에 forceRender 를 추가 하시면 됩니다. 또는 Modal이 표시되고 렌더링이 완료된 후 setFieldsValue 및 resetFields 호출합니다.

서랍을 사용할 때 Drawer에는 forcerender API가 있는데 Modal과 다른 서랍의 API는 강제 렌더링이 아니라 사전 렌더링을 하고 나서 같은 에러가 나는데 해결 방법이 없을까요? 렌더링이 완료되었는지 판단하는 방법은 무엇입니까?

나는 풀었다.서로에서 getContainer={false}를 사용하면 해결할 수 있다.모달도 마찬가지라고 생각한다.
나는 서랍에서 getContainer={false}를 사용합니다. 모달에도 같은 문제가 있어야 합니다. 시도해 볼 수 있습니다.

useRef를 사용하여 Form 객체를 저장할 수 있으며, 폼을 사용하기 전에 useRef가 존재하는지 확인할 수 있습니다.

여기에 같은 문제가 있습니다. 양식이 할당되었지만 계속 실패합니다.

효과에서 직접 form.setFieldsValue를 호출하면 forceRenter가 추가되고 Modal이 다시 열리더라도 여전히 이 경고가 표시됩니다.임시 솔루션은 효과에서 setTimeout(() => form.setFieldsValue, 0)만 가능합니다.

서랍의 문제를 해결하기 위해 getContainer={false}를 사용하고 경고를 보고하지 않았는데, 같은 문제가 발생하면 시도해볼 수 있고 Form 문서에 명확하게 작성될 수 있기를 바랍니다.

감사합니다 이 방법으로 같은 문제를 해결했습니다👍

귀하의 방법은 실현 가능합니다. 원리를 설명할 수 있습니까?

내 해결 방법은 Form 가 렌더링될 때 useState 로 ref 을 만든 다음 양식 인스턴스를 사용하기 전에 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={form} blabla >

여기 {form}은 const [form] = Form.useForm(); 에서 왔습니다.

Doc(내가 팔로우했던) -
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
>

감사합니다. Modal에 forceRender 소품을 추가하여 이 문제를 해결했습니다.

    const [form] = Form.useForm()

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

    </Form>```


         this did the trick for me.

나는 그것을 작동했다.
처음에는 antd 구성 요소를 다음과 같이 호출했습니다.
<Form blabla >

그런 다음 Form 구성 요소에 양식 소품을 추가했습니다.

<Form form={form} blabla >

여기 {form}은 const [form] = Form.useForm(); 에서 왔습니다.

Doc(내가 팔로우했던) -
https://ant.design/components/form/#components -form-demo-form-in-modal

귀하의 경우는 다를 수 있습니다.

이것은 나에게도 해결되었습니다. 나는 모달이 아닌 서랍에 있는 폼을 사용하고 있었다

나를 위한 비밀 콤보는 다음과 같습니다.

useEffect(() => {
if (양식 && 표시) {
만약 (현재) {
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?file=/index.js

form.getVieldValue를 Form.Item 구성 요소로 이동해야 합니다.

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

또 다른 방법은 useRef()를 사용하는 것입니다.

Draw + Form. Modal + Form의 경우 방법이 적용됩니다.

1. forceRender=true, destroyOnClose=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, destroyOnClose=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}
>

또는 이 방법으로

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

React.useEffect(()=>{
// 웹 서비스 또는 API에서 데이터 값 가져오기
// 결함(...)
if (values_from_api){
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, destroyOnClose=false 설정입니다. 내가 무엇을 잘못하고 있지?

V4 버전 사용시(함수 컴포넌트에 형태가 존재함) 이 문제로 이틀동안 고민하다가 거의 다운될뻔 했습니다.(오류가 발생했지만 사용에는 지장이 없었습니다.) 마지막으로 https://ant 를 읽게 되었습니다
useEffect(() => {
반환() => {
form.resetFields();
};
})
반환()=>{....}에서 소멸을 유발하는 것은 전체 함수 구성 요소입니다(현재 양식이 소멸되는지 여부는 테스트되지 않음).
문서 설명: destroyOnClose | 닫을 때 모달의 자식 요소를 파괴합니다. 기본값은 false입니다. forceRender | Modal의 필수 렌더링, 기본값은 false입니다.
솔루션: Modal의 forceRender=true, destroyOnClose=false, Modal이 소멸(닫힘)되면 오류가 보고되지 않습니다. 양식은 내부 코드가 실행될 때 찾을 수 있지만 입력 제어 ID 반복 경고가 보고됩니다(오류보다 우아함).

나는 또한이 문제가 발생하여이 방법으로 해결했습니다.
모달 구성 forceRender | 강제 렌더링
Modla 형식에서 name={['modal','cityCode']}
Name={['search','cityCode']} 또는 name='cityCode' 필터 양식
이러한 방식으로 모든 경고를 해결할 수 있으며 고유하지 않은 ID 경고가 있는 Found 2 요소는 보고되지 않습니다 ⚠

useRef를 사용하여 양식의 참조를 참조하고 formRef.current의 메소드를 사용할 수 있습니다.

const formRef = useRef()

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

Modal의 Form은 기본적으로 렌더링되지 않습니다. @se7en00님 의 답글을 참고하여 Modal에 forceRender 를 추가 하시면 됩니다. 또는 Modal이 표시되고 렌더링이 완료된 후 setFieldsValue 및 resetFields 호출합니다.

모달에 forceRender 속성을 추가하는 것은 전혀 쓸모가 없습니다.

공식 블록의 예도 다음과 같이 경고합니다.

V4 버전 사용시(함수 컴포넌트에 형태가 존재함) 이 문제로 이틀동안 고민하다가 거의 다운될뻔 했습니다.(오류가 발생했지만 사용에는 지장이 없었습니다.) 마지막으로 https://ant 를 읽게 되었습니다
useEffect(() => {
반환() => {
form.resetFields();
};
})
반환()=>{....}에서 소멸을 유발하는 것은 전체 함수 구성 요소입니다(현재 양식이 소멸되는지 여부는 테스트되지 않음).
문서 설명: destroyOnClose | 닫을 때 모달의 자식 요소를 파괴합니다. 기본값은 false입니다. forceRender | Modal의 필수 렌더링, 기본값은 false입니다.
솔루션: Modal의 forceRender=true, destroyOnClose=false, Modal이 소멸(닫힘)되면 오류가 보고되지 않습니다. 양식은 내부 코드가 실행될 때 찾을 수 있지만 입력 제어 ID 반복 경고가 보고됩니다(오류보다 우아함).

이 방법은 해결할 수 있지만 삼항 연산자가 표시되는 경우 Modal 및 forceRender=true의 외부 계층을 결정하는 데 사용되며 destroyOnClose=false는 다음과 같습니다.
{visible ? : <Modal visible={visible} forceRender destroyOnClose={false}><Form form={form} onFinish={handleFinish}>...</Form></Modal> : null}
문제가 있습니다. 마스크만 표시되고 글머리 기호 상자가 표시되지 않습니다.

이와 같이 forceRender=true, destroyOnClose=false로 설정하고, onOk 또는 onCancel 팝업이 닫힐 때 form.resetFields()를 사용하면 더 이상 오류가 보고되지 않습니다.
<Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal>
그러나 삼항 연산자 visible?을 사용하여 Modal의 외부 레이어를 결정하고 forceRender=true로 설정하면 다음과 같이 destroyOnClose=false가 됩니다.
{visible ? <Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal> : null }
문제가 있습니다. 마스크만 표시되고 글머리 기호 상자가 표시되지 않습니다.

공식 솔루션

링크

V4 버전 사용시(함수 컴포넌트에 형태가 존재함) 이 문제로 이틀동안 고민하다가 거의 다운될뻔 했습니다.(오류가 발생했지만 사용에는 지장이 없었습니다.) 마지막으로 https://ant 를 읽게 되었습니다
useEffect(() => {
반환() => {
form.resetFields();
};
})
반환()=>{....}에서 소멸을 유발하는 것은 전체 함수 구성 요소입니다(현재 양식이 소멸되는지 여부는 테스트되지 않음).
문서 설명: destroyOnClose | 닫을 때 모달의 자식 요소를 파괴합니다. 기본값은 false입니다. forceRender | Modal의 필수 렌더링, 기본값은 false입니다.
솔루션: Modal의 forceRender=true, destroyOnClose=false, Modal이 소멸(닫힘)되면 오류가 보고되지 않습니다. 양식은 내부 코드가 실행될 때 찾을 수 있지만 입력 제어 ID 반복 경고가 보고됩니다(오류보다 우아함).

나는 또한이 문제가 발생하여이 방법으로 해결했습니다.
모달 구성 forceRender | 강제 렌더링
Modla 형식에서 name={['modal','cityCode']}
Name={['search','cityCode']} 또는 name='cityCode' 필터 양식
이러한 방식으로 모든 경고를 해결할 수 있으며 고유하지 않은 ID 경고가 있는 Found 2 요소는 보고되지 않습니다 ⚠

[양식 이름은 양식 필드 ID의 접두사로 사용됩니다.] 따라서 고유하지 않은 ID를 가진 Found 2 elements에 대한 경고가 없습니다.

getContainer={false}를 모달 속성으로 + form.resetFields()를 호출할 때 모달을 표시하면 경고가 표시되지 않습니다.

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

이런 식으로 destroyOnClose도 true가 될 수 있습니다.

Form.useFrom 대신 useRef를 사용하여 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);
  }
}

내 해결 방법은 Form 가 렌더링될 때 useState 로 ref 을 만든 다음 양식 인스턴스를 사용하기 전에 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.+
2."form.setFields()" 또는 useEffect()의 다른 함수

나는 이것을 사용하여 해결합니다.

<Modal
        getContainer={false}
        // destroyOnClose
>

공식 솔루션

링크

완벽, 모달에 forceRender 추가

formHooked 을 공개하고 사용자가 스스로 판단하게 하는 것은 어떻습니까?