showAlertが止まりません

Question

Reactを使って条件に応じてshowAlertを使い異なるポップアップを出しています。
画面で一つのポップアップの質問に答えて、その処理を終えてから次に進みたいのですが、ポップアップが出る前に次の処理に進んでしまいます。
デバッグをして一つずつstep overして進めるとポップアップは出ますが、ポップアップが選択できるようになる前に次の処理が発生してします。

showAlertを使って、その処理の間は違う処理に行かないようにすることはできますでしょうか？
もしくはshowAlert以外の他の方法で実現することはできますでしょうか。

//"Are you sure?"のポップアップに返答して、ここのupdateの処理をしてから次のif文に進みたいです。
if(hoge.length!==0){
   this.props.showAlert({
    text: "Are you sure?"
    type: 'info',
    showCancel: true,
    onConfirm: () => this.props.update({
    code: values.type,
    type: values.type
   })
 })
}

if(hoge1.length!==0){
   this.props.showAlert({
    text: "Do you want to delete it?"
    type: 'info',
    showCancel: true,
    onConfirm: () => this.props.delete({
    code: values.type,
    type: values.type
   })
  })

Answer 1

記載いただいている前後の部分がわからないので、ここで解決することは難しいかもしれませんが、

画面で一つのポップアップの質問に答えて、その処理を終えてから次に進みたいのですが、ポップアップが出る前に次の処理に進んでしまいます。

デバッグをして一つずつstep overして進めるとポップアップは出ますが、ポップアップが選択できるようになる前に次の処理が発生してします。

この部分に関しては、何らかの原因で
非同期処理となってしまっている可能性があります。（実行完了を待たずに次に進む処理）

showAlertの部分を実行完了するまで待つように変更してみてはいかがでしょうか？

以下ご覧ください

• https://note.com/vixer93/n/nebe5b1a9f4c4
• https://techacademy.jp/magazine/21141

Comments

[WalterMontes]

ご回答いただきありがとうございます。おっしゃるとおり、待つべき処理を待たずに次の処理にいってしまっていました。シェアしていただいたものと非同期処理について調べて色々試したところ、thenを使って解決することができました。ご協力いただきありがとうございました！

[sunsunny-k]

よかったです。
（apiなどの）外部連携以外にも、処理に時間がかかってしまう場合も非同期処理になってしまうようですね。