React フックのフォームフィールド配列の検証が機能しない

Question

required や minLength などのいくつかの検証ルールを設定した入力フィールドを含むフィールドの配列があります。

新しいフィールドが追加されたときにすぐに検証されるようにしたいです。ただし、これは発生せず、空のフィールドを追加した場合でも、これらの入力フィールドのエラーは未定義のままです:

リーリー

これは検証する必要がある制御された入力です:

リーリー

ここで、実際に動作するコードとボックスの例を確認できます。 変更するたびに有効にするにはどうすればよいですか?

Answer 1

フィールドを配列に追加するために使用される append メソッドは非同期であり、検証を実行する trigger メソッドも非同期であるため、フィールドの競合を引き起こす競合状態が発生します。アレイに登録する前に登録する必要があります トリガー検証フォーム。配列フィールドを追加するときに再検証をトリガーする前に、関数の結果を await するだけです。

リーリー

あなたの CSB を ここ にフォークしました。また、コンポーネントのインストール時に検証をトリガーする useEffect フックも追加しました。