フォーム送信ハンドラー内からカスタム フック setState を呼び出しても状態が更新されない

Question

エラー メッセージを表示するには、フォーム内のフィールドに注目する必要があります。フィールドにまだフォーカスを当てていないときに「送信」をクリックしたときにエラー メッセージが表示されるようにしたいと考えています。

これはフックです (後の setIsTouched 呼び出しに関するものであると思われます):

リーリー

これはフォーム ハンドラーです (各フィールドにエイリアスを使用しました):

リーリー

検証名フィールドを例として、最初に送信ボタンをクリックします。 現在、 const hasError = errorArray.length > 0 && isTouched; 配列には要素がありますが、フィールドにフォーカスがないため isTouched は false です。

次に「touchNameField(true);」が登場します。 hasErrorをtrueにしてみましたが、まだfalseと表示されます。

setState 呼び出しは非同期ですが、それが問題ですか?リセット呼び出しを削除すると機能します。しかし、なぜnameInputErrorなどがfalseになるのかはまだわかりません。

Answer 1

これを実行しない場合は、errorArray と hasError が変更に反応していないためだと思います。したがって、そのフックをインスタンス化する場所によっても異なります。 テストを行わない場合 私なら次のことを試します:

リーリー

繰り返しになりますが、テストされていないため、調整が必要になる可能性があります。