[実戦] Reactの実戦プロジェクトでよくあるエラー—— `useForm`で作成されたインスタンスがどのForm要素にも接続されていません。

---

1. 問題点

使用済み：

const [form] = Form.useForm();

生成:によって作成されたインスタンスは、useFormどの Form 要素にも接続されていません。formプロップを渡すのを忘れていますか?

2、解決する

どちらの場合もエラーが発生します。

1. フォーム要素がレンダリングされない

• モーダルボックス（Modal）またはスライドドロワー（Drawer）内のフォーム（Form）を使用するのが一般的です

公式ドキュメントには次のように書かれています。これは、フォーム メソッドを呼び出すときにモーダルが初期化されていないため、フォームがどのフォーム コンポーネントにも関連付けられていないためです。モーダルを事前にレンダリングするには、forceRender を設定します。( https://4x.ant.design/components/form-cn/#なぜ -Modal- で -form- console を呼び出すとエラーが報告されるのでしょうか? )

• 最近、暗黙的な使用法によってもこのエラーが発生する可能性があることが判明しました。フォームから解析された関数は、Form コンポーネントのレンダリングが完了する前に使用されます。次に例を示します。

const [ form ] = Form.useForm()
const {
    
     getFieldValue, setFieldsValue } = form

return <Form form={
    
    form}>
  <Form.Item>...</Form.Item>
  <XComponent value={
    
    getFieldValue(fieldName)}/>
</Form>

関数呼び出しは、アロー関数の戻り形式に変更できます。

value={
    
    () => getFieldValue(fieldName)}

form2.小​​道具を渡すのを忘れる

バインドする属性がありませformんFormform

3. 学びを広げる

1.フォーム

useForm で抽出されたフォームと props.form の違いは何ですか?

---