required や minLength などのいくつかの検証ルールを設定した入力フィールドを含むフィールドの配列があります。
required
minLength
新しいフィールドが追加されたときにすぐに検証されるようにしたいです。ただし、これは発生せず、空のフィールドを追加した場合でも、これらの入力フィールドのエラーは未定義のままです:
これは検証する必要がある制御された入力です:
ここで、実際に動作するコードとボックスの例を確認できます。 変更するたびに有効にするにはどうすればよいですか?
フィールドを配列に追加するために使用される append メソッドは非同期であり、検証を実行する trigger メソッドも非同期であるため、フィールドの競合を引き起こす競合状態が発生します。アレイに登録する前に登録する必要があります トリガー検証フォーム。配列フィールドを追加するときに再検証をトリガーする前に、関数の結果を await するだけです。
append
trigger
await
あなたの CSB を ここ にフォークしました。また、コンポーネントのインストール時に検証をトリガーする useEffect フックも追加しました。
useEffect
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
フィールドを配列に追加するために使用される
リーリーappendメソッドは非同期であり、検証を実行するtriggerメソッドも非同期であるため、フィールドの競合を引き起こす競合状態が発生します。アレイに登録する前に登録する必要があります トリガー検証フォーム。配列フィールドを追加するときに再検証をトリガーする前に、関数の結果をawaitするだけです。あなたの CSB を ここ にフォークしました。また、コンポーネントのインストール時に検証をトリガーする
useEffectフックも追加しました。