困っていること

formをsubmitした時に、APIをコールする前にバリデーション処理を入れてバリデーションエラーだった場合にstatus（booleanでデフォルト値がtrueです）というstateがfalseになるのですが、実際に試してみるとfalseにならずにAPIをコールする関数に処理が流れてしまいます。
そのため、バリデーションがうまく処理されていないと思い、statusのstateを確認するとfalseにはちゃんとなっていました。
なので、stateの更新はされてはいるけど、if (!status) { return }では更新の結果が反映されていないのかなと思うのですがその場合、更新の結果をどう反映させたらいいかご教示頂きたいです。

js
1const handleSubmit = (e) => {
2  e.preventDefault();
3  validate() // validation
4  if (!status) { return }
5  callAPI() // call API
6}

hoshi-takanori

2021/01/08 23:35

status がどこでどう宣言・代入 (初期化) されてるかにもよりますが、おそらく次の render まで変化しないので、validate が setState した値を return するようにして、その値を使うようにすればいい気がします。

nanase21

2021/01/09 03:46

> render まで変化しないのでやっぱりそうですよね。ご教示頂きありがとうございました。 setSatateでやってみたいと思います。

hoshi-takanori

2021/01/09 04:03

あ、redux を使ってるなら setState じゃないかも知れませんが、自分が言いたかったのは、validate の中でなんらかの方法で state を更新してると思いますが、それはたぶん status という変数には反映されてない可能性が高いので、validate は state.を更新した上でそれを return して、その結果を見て callAPI するかどうかを判断すべきってことです。