reactjs - final-form-arrays の配列に initialValues を指定すると、状態の変更によりフォーム全体がリセットされます。これを防ぐにはどうすればよいですか?

Question

final-form-arrays を使用するフォームがあります。フォームは機能し、検証は機能しますが、コンポーネント内で状態を変更すると、すべての値がリセットされます。

react-final-form-arrays が提供するのと同じ例で問題を再現できました。

状態変更を切り替えるボタンを追加しました。基本的に、フォームに値を入力してから、状態を変更してみてください。フォームがリセットされますが、その理由がわかりません。initialValues を削除すると、これは起こりません。

その理由を知っている人はいますか？

score 3 · Accepted Answer

2つの問題。

インライン renderProp を Form コンポーネントに渡しています。これは、コンポーネントがレンダリングされるたびにフォームがリセットされる新しい関数を作成していることを意味します。解決策は、renderProp を上記の関数に移動して渡すことです。理想的には、useCallback でメモ化します。
上記を修正しても、フォームはリセットされます。これは、インライン配列を initialValues に渡しているためです。これにより、コンポーネントがレンダリングされるたびに新しい配列が作成され、フォームがリセットされます。変数に移動して渡します。

これはかなり一般的な初心者の間違いです。どのコンポーネントを再レンダリングするかを判断するために、react がどのように参照等価チェックを行うかを読む必要があります。

2 に答える 2