Ant-design: Instance yang dibuat oleh `useForm` tidak terhubung ke elemen Form mana pun. Lupa meneruskan prop `form`? Jelas mengikuti contoh.

Halo @LamTech. Harap berikan reproduksi online dengan forking tautan ini https://u.ant.design/codesandbox-repro atau repositori GitHub minimal. Masalah yang diberi label Need Reproduce akan ditutup jika tidak ada aktivitas dalam 7 hari .

Halo @LamTech , kami membutuhkan Anda untuk memberikan contoh sini untuk membuat kode dan kotak atau menyediakan repositori GitHub minimal. Masalah yang tidak ditindaklanjuti dalam 7 hari akan ditutup secara otomatis.

Kuncinya adalah saya menggunakan metode ini, tetapi tetap melaporkan peringatan kesalahan ini.

Masalah yang sama di sini, tetapi tidak dapat mereproduksinya di kode dan kotak.

+1

Tambahkan atribut forceRender ke Modal

Anda dapat menambahkan penundaan ke metode setFieldsValue

Panggil form.resetFields(); sepertinya ini. http://localhost :8001/components/form-cn/#components-form-demo-form-context yang dimulai secara lokal akan dilaporkan.

+1
Peringatan ini akan muncul saat menggunakan setFieldsValue, tetapi dapat disajikan dengan lancar,
Saya melewati instance useForm

Formulir di Modal tidak akan dirender secara default, Anda dapat merujuk ke balasan @se7en00 dan menambahkan forceRender ke Modal. Atau hubungi setFieldsValue dan resetFields setelah Modal ditampilkan dan rendering selesai.

Saat menggunakan versi V4 (form ada di komponen fungsi), saya terganggu oleh masalah ini selama dua hari dan hampir crash (dilaporkan kesalahan tetapi tidak mempengaruhi penggunaan), akhirnya saya membaca https://ant.design / dan https://next. .ant.design/Temukan penggunaan form pada komponen fungsi dan kelas harus memahami dan membedakan antar komponen fungsi
useEffect(() => {
kembali () => {
form.resetFields();
};
})
Ini adalah seluruh komponen fungsi yang memicu penghancuran kembali ()=>{....} (tidak diuji apakah formulir dihancurkan saat ini)
Deskripsi dokumen: destroyOnClose | Hancurkan elemen anak di Modal saat ditutup, defaultnya salah. forceRender | Render wajib Modal, default salah.
Solusi: Modal's forceRender=true, destroyOnClose=false, ketika Modal dihancurkan (ditutup), tidak ada kesalahan yang akan dilaporkan. Formulir dapat ditemukan ketika kode internal dijalankan, tetapi peringatan berulang id kontrol input akan dilaporkan (lebih elegan daripada kesalahan).

Masalah yang sama +1

jika kode Anda melibatkan setFieldsValue atau fungsi lain yang serupa, sebut saja setelah node dirender

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

atau

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

Ini memecahkan masalah saya

Saya merasa bahwa tidak satu pun di atas yang dapat menyelesaikan masalah ini sepenuhnya. Dapatkah Anda menambahkan atribut ke formulir untuk menunjukkan apakah formulir tersebut memiliki Bidang, dan biarkan pengembang sendiri yang menentukan apakah akan mengeksekusi kode berikut

Hal yang sama terjadi di sini

Belum fix?

Mencoba semua metode yang disebutkan di atas, tidak berhasil

Formulir di Modal tidak akan dirender secara default, Anda dapat merujuk ke balasan @se7en00 dan menambahkan forceRender ke Modal. Atau hubungi setFieldsValue dan resetFields setelah Modal ditampilkan dan rendering selesai.

Ketika saya menggunakan laci, meskipun Laci memiliki API forcerender, API laci, yang berbeda dari Modal, tidak rendering paksa tetapi pra-rendering, dan kemudian kesalahan yang sama dilaporkan, jadi apakah ada solusi? Bagaimana menilai rendering selesai?

Saya memecahkannya. Di laci, gunakan getContainer={false} dapat menyelesaikannya. Saya pikir Modalnya sama.
Saya menggunakan getContainer={false} di laci. Modal juga harus memiliki masalah yang sama. Anda dapat mencoba

Anda bisa menggunakan useRef untuk menyimpan objek Form, dan Anda bisa menentukan apakah useRef ada sebelum menggunakan formulir;

Masalah yang sama disini. formulir diberikan tetapi tetap gagal.

Jika Anda memanggil form.setFieldsValue langsung di efek, bahkan jika forceRenter ditambahkan dan Modal dibuka kembali, masih akan ada peringatan ini Solusi sementara hanya dapat setTimeout(() => form.setFieldsValue, 0) di efek.

Untuk mengatasi masalah laci, saya menggunakan getContainer={false} dan tidak melaporkan peringatan.Jika masalah yang sama terjadi, Anda dapat mencobanya dan berharap dapat ditulis dengan jelas di dokumen Formulir.

Terima kasih, metode ini memecahkan masalah yang sama 👍

Metode Anda layak, dapatkah Anda menjelaskan prinsipnya?

Solusi saya, buat ref oleh useState ketika Form dirender, lalu periksa ref sebelum menggunakan instance formulir.

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

Tidak ada lagi peringatan lagi!

apakah sulit untuk membahas dalam bahasa Inggris?

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

jika Anda menggunakan setFieldsValue, mungkin coba kode berikut untuk menggantikan (ide bodoh saya)。

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

Aku membuatnya bekerja.
Awalnya saya memanggil komponen antd sebagai
<Form blabla >

Saya kemudian menambahkan prop formulir di komponen Formulir -

<Form form={form} blabla >

Di sini {form} berasal dari const [form] = Form.useForm();

Dok (Yang saya ikuti) -
https://ant.design/components/form/#components -form-demo-form-in-modal

Kasus Anda mungkin berbeda.

https://codesandbox.io/s/form-in-modal-to-create-ant-design-demo-xvcyv
Masalah yang sama, ada yang bisa memperbaikinya???

Lihat linxianxi di atas, https://github.com/ant-design/ant-design/issues/21543#issuecomment -598515368

Modal saya bisa

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

Modal saya bisa

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

Terima kasih, saya memperbaiki masalah ini dengan menambahkan alat peraga forceRender di Modal

    const [form] = Form.useForm()

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

    </Form>```


         this did the trick for me.

Aku membuatnya bekerja.
Awalnya saya memanggil komponen antd sebagai
<Form blabla >

Saya kemudian menambahkan prop formulir di komponen Formulir -

<Form form={form} blabla >

Di sini {form} berasal dari const [form] = Form.useForm();

Dok (Yang saya ikuti) -
https://ant.design/components/form/#components -form-demo-form-in-modal

Kasus Anda mungkin berbeda.

Ini memperbaikinya untuk saya juga. Saya menggunakan formulir di laci, bukan modal

Kombo rahasia bagi saya adalah:

useEffect(() => {
if (bentuk && terlihat) {
jika (saat ini) {
setTimeout (() => form.setFieldsValue({
...saat ini,
}), 0);
} lain {
form.resetFields();
}
}
}, [saat ini]);

Kesalahan yang sama di sini tanpa modal dan form prop pass ke komponen Form
https://codesandbox.io/s/basic-usage-ant-design-demo-6llbw?file=/index.js :1618-1661

Kesalahan yang sama di sini tanpa modal dan form prop pass ke komponen Form
https://codesandbox.io/s/basic-usage-ant-design-demo-6llbw?file=/index.js :1618-1661

Perbaiki untuk Anda: https://codesandbox.io/s/basic-usage-ant-design-demo-ksuz8?file=/index.js

anda harus memindahkan form.getVieldValue ke dalam komponen Form.Item

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

metode lain adalah dengan menggunakan useRef()

Draw + Form Untuk Modal + Form, caranya berlaku.

1. forceRender=true, destroyOnClose=false. Ini bekerja pada salah satu komponen saya, tetapi tidak bekerja pada yang lain. Saya menemukan bahwa, karena hubungan antara Form.Item, kode saya adalah

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

Penggunaan yang tepat: Metode formulir

<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. Ini bekerja pada salah satu komponen saya, tetapi tidak bekerja pada yang lain.Saya menemukan bahwa karena keterkaitan antar komponen, kode saya adalah sebagai berikut

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

Cara penggunaan yang benar: pemanggilan metode formulir

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

Itu terjadi karena elemen formulir belum dirender, tetapi Anda telah menetapkan nilai untuk formulir. Saya pikir ini adalah pengetahuan dasar tentang reaksi dan kait.. Anda dapat menggunakan setTimeout untuk menunggu formulir yang diberikan.

Tetapi cara terbaik untuk menetapkan nilai awal formulir adalah

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

atau dengan metode ini

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

React.useEffect(()=>{
// dapatkan nilai data dari layanan web atau API
// efek(...)
if (nilai_dari_api){
setValues(nilai_from_api);
}
}, [])

kembali <>

Bagaimana jika saya perlu menggunakan nilai formulir di kait kustom saya sendiri?
Dengan Ant 3 saya melakukannya seperti itu:

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

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

<Form>...</Form>

Dengan Ant 4 jika saya mencoba melakukannya seperti itu, saya akan mendapatkan kesalahan ini dari topik.

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

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

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

Formulir ada di Modal, forceRender=true, destroyOnClose=false set. Apa yang saya lakukan salah?

Saat menggunakan versi V4 (form ada di komponen fungsi), saya terganggu oleh masalah ini selama dua hari, dan hampir crash (dilaporkan kesalahan tetapi tidak mempengaruhi penggunaan), akhirnya saya membaca https://ant. design/ dan https://next. .ant.design/Temukan penggunaan form pada komponen fungsi dan kelas harus memahami dan membedakan antar komponen fungsi
useEffect(() => {
kembali () => {
form.resetFields();
};
})
Ini adalah seluruh komponen fungsi yang memicu penghancuran kembali ()=>{....} (tidak diuji apakah formulir dihancurkan saat ini)
Deskripsi dokumen: destroyOnClose | Hancurkan elemen anak di Modal saat ditutup, defaultnya salah. forceRender | Render wajib Modal, default salah.
Solusi: Modal's forceRender=true, destroyOnClose=false, ketika Modal dihancurkan (ditutup), tidak ada kesalahan yang akan dilaporkan. Formulir dapat ditemukan ketika kode internal dijalankan, tetapi peringatan berulang id kontrol input akan dilaporkan (lebih elegan daripada kesalahan).

Saya juga mengalami masalah ini, saya menyelesaikannya dengan cara ini
Konfigurasi modal forceRender | Render paksa
Dalam bentuk Modla, name={['modal','cityCode']}
Name={['search','cityCode']} atau name='cityCode' dalam bentuk filter
Dengan cara ini, semua peringatan dapat diselesaikan dan elemen Ditemukan 2 dengan peringatan id non-unik tidak akan dilaporkan

Anda dapat menggunakan useRef untuk merujuk ke referensi formulir, gunakan metode di formRef.current

const formRef = useRef()

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

Formulir di Modal tidak akan dirender secara default, Anda dapat merujuk ke balasan @se7en00 dan menambahkan forceRender ke Modal. Atau hubungi setFieldsValue dan resetFields setelah Modal ditampilkan dan rendering selesai.

Menambahkan atribut forceRender ke Modal sama sekali tidak berguna

Contoh di blok resmi juga memperingatkan

Saat menggunakan versi V4 (form ada di komponen fungsi), saya terganggu oleh masalah ini selama dua hari, dan hampir crash (dilaporkan kesalahan tetapi tidak mempengaruhi penggunaan), akhirnya saya membaca https://ant. design/ dan https://next. .ant.design/Temukan penggunaan form pada komponen fungsi dan kelas harus memahami dan membedakan antar komponen fungsi
useEffect(() => {
kembali () => {
form.resetFields();
};
})
Ini adalah seluruh komponen fungsi yang memicu penghancuran kembali ()=>{....} (tidak diuji apakah formulir dihancurkan saat ini)
Deskripsi dokumen: destroyOnClose | Hancurkan elemen anak di Modal saat ditutup, defaultnya salah. forceRender | Render wajib Modal, default salah.
Solusi: Modal's forceRender=true, destroyOnClose=false, ketika Modal dihancurkan (ditutup), tidak ada kesalahan yang akan dilaporkan. Formulir dapat ditemukan ketika kode internal dijalankan, tetapi peringatan berulang id kontrol input akan dilaporkan (lebih elegan daripada kesalahan).

Cara ini dapat diselesaikan, tetapi jika operator ternary terlihat? Digunakan untuk menentukan lapisan luar Modal dan forceRender=true, destroyOnClose=false seperti ini:
{visible ? : <Modal visible={visible} forceRender destroyOnClose={false}><Form form={form} onFinish={handleFinish}>...</Form></Modal> : null}
Ada masalah: hanya topeng yang ditampilkan, tetapi kotak peluru tidak ditampilkan

Setel forceRender=true dan destroyOnClose=false dengan cara ini, lalu gunakan form.resetFields() saat popup ditutup onOk atau onCancel, dan tidak ada lagi kesalahan yang akan dilaporkan.
<Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal>
Tetapi jika Anda menggunakan operator ternary yang terlihat? untuk menentukan lapisan luar Modal dan mengatur forceRender=true, destroyOnClose=false seperti ini:
{visible ? <Modal visible={visible} forceRender destroyOnClose={false} > <Form form={form} onFinish={handleFinish}>...</Form> </Modal> : null }
Ada masalah: hanya topeng yang ditampilkan, tetapi kotak peluru tidak ditampilkan

Solusi resmi

Tautan

Saat menggunakan versi V4 (form ada di komponen fungsi), saya terganggu oleh masalah ini selama dua hari, dan hampir crash (dilaporkan kesalahan tetapi tidak mempengaruhi penggunaan), akhirnya saya membaca https://ant. design/ dan https://next. .ant.design/Temukan penggunaan form pada komponen fungsi dan kelas harus memahami dan membedakan antar komponen fungsi
useEffect(() => {
kembali () => {
form.resetFields();
};
})
Ini adalah seluruh komponen fungsi yang memicu penghancuran kembali ()=>{....} (tidak diuji apakah formulir dihancurkan saat ini)
Deskripsi dokumen: destroyOnClose | Hancurkan elemen anak di Modal saat ditutup, defaultnya salah. forceRender | Render wajib Modal, default salah.
Solusi: Modal's forceRender=true, destroyOnClose=false, ketika Modal dihancurkan (ditutup), tidak ada kesalahan yang akan dilaporkan. Formulir dapat ditemukan ketika kode internal dijalankan, tetapi peringatan berulang id kontrol input akan dilaporkan (lebih elegan daripada kesalahan).

Saya juga mengalami masalah ini, saya menyelesaikannya dengan cara ini
Konfigurasi modal forceRender | Render paksa
Dalam bentuk Modla, name={['modal','cityCode']}
Name={['search','cityCode']} atau name='cityCode' dalam bentuk filter
Dengan cara ini, semua peringatan dapat diselesaikan dan elemen Ditemukan 2 dengan peringatan id non-unik tidak akan dilaporkan

[Nama formulir akan digunakan sebagai awalan id bidang formulir] Jadi tidak ada peringatan tentang Ditemukan 2 elemen dengan id tidak unik

getContainer={false} sebagai properti modal + membuat modal terlihat ketika saya memanggil form.resetFields() berfungsi agar saya tidak menampilkan peringatan

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

Dengan cara ini, destroyOnClose juga bisa benar

Saya menggunakan useRef alih-alih Form.useFrom untuk mendapatkan contoh Formulir, ini berfungsi untuk saya

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

Hanya dua sen saya: kesalahan ini muncul untuk saya ketika saya mencoba mengatur ulang formulir yang tidak dipasang, jadi menambahkan ketergantungan ke konstanta yang diperlukan menyelesaikannya.

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

EDIT: kurang lebih seperti yang dikatakan @fabripeco :D

Saya menggunakan formulir di Popover, useRef dapat digunakan untuk saya, saya pikir itu dapat digunakan untuk modal

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

Solusi saya, buat ref oleh useState ketika Form dirender, lalu periksa ref sebelum menggunakan instance formulir.

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

Tidak ada lagi peringatan lagi!

diselesaikan dengan sempurna!

Dua alasan kasus Peringatan ini：
1.+
2.."form.setFields()" atau fungsi lain di useEffect()

Saya memecahkan menggunakan ini:

<Modal
        getContainer={false}
        // destroyOnClose
>

Solusi resmi

Tautan

Sempurna, tambahkan forceRender ke modal

Mengapa Anda tidak mengekspos formHooked dan membiarkan pengguna menilai sendiri, tidakkah Anda merasa lelah dengan metode berkeliling di atas?