slime_limer
@slime_limer (すらいむ)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Reactコンポーネントでのデータ保持の方法

Q&A

Closed

React初学者です。
Reactのコンポーネントの中でどのように値を保持すれば良いか分からないのでアドバイスいただきたいです。

今、React+apollo(GraphQL)+Oracleの環境で開発しています。

行いたいことは下記です。
①登録ボタンを押したらstateにセットしたデータをDBに登録する。
②データ登録後、データをフェッチする。
③フェッチしたデータを加工した上でstateにセットする。
④(①に戻る)

現状、登録するデータをstateにセットしているのですが(画面描画にも使うため)、この時おそらくですが③のstateにデータをセットする処理が非同期なため、登録ボタンを素早く2回押した場合にフェッチしたデータが再セットされないまま前回のデータが登録されてしまいます。

このような場合に一般的にはどのような方法でデータを保持して(または別の方法で)この現象を回避するのでしょうか?
stateに保持するデータと全く同じものを変数として持てば解決するのかなと考えたのですが、もやもやします。
初歩的な質問で申し訳ありませんが、ご教授ください。よろしくお願いします。

0

3Answer

登録ボタンを素早く2回押した場合にフェッチしたデータが再セットされないまま前回のデータが登録されてしまいます。

2回押されないようにボタンをdisabledにしてはいかがでしょうか?

0Like

Comments

  1. @slime_limer

    Questioner

    ご回答ありがとうございます。
    一応データ登録時にボタンをdisabledにしているんですが、useStateでsetが完了する前に(非同期処理だから?)処理終了としてdisabled解除してしまいます。useStateのsetが終了したタイミングを検知できれば良いのですがイマイチ方法が分からず、、、

  2. 登録ボタンをdisabledする処理を入れたうえで、問題の現象(2回押すことが出来て処理が2重に実行される)が起こる、ということでしょうか?
    具体的なコードを記載して説明したいただいた方が良いかもしれません。

  3. @slime_limer

    Questioner

    申し訳ないです。業務に関わっていて具体的なコードを示すのが難しくて、、、。助言いただきありがとうございます🙇‍♂️

①の処理をawaitして、処理が終わったらデータフェチのQuery keyを削除でどうでしょうか

0Like

Comments

  1. @slime_limer

    Questioner

    ありがとうございます。apiの処理に疎いので調べて試してみます!

「React 多重クリック」とかで調べると幸せになれるかと。

基本的には送信状態を管理するフラグでダブルクリックを防ぐことになると思います。
useStateは画面の更新処理が入るので、フラグ管理にはuseRefを使ってください。

(記入場所ミスったので再投稿です、、、)

0Like

Comments

  1. @slime_limer

    Questioner

    ありがとうございます。useRefで同期的に値を管理できるんですね。全然知らなかったです!

Your answer might help someone💌