FROM CACHE - jp_header

useStateの値が更新されない

useStateの値が更新されない

daikussi
Shopify Partner
28 1 3

お世話になっております。

現在アプリ開発を行っており、管理画面の処理を今行っています。

今はフラグ処理を書いて公開、非公開のボタンを切り替えて実装しています。

ただ自分の書き方が悪いのか、非公開から公開に切り替えても更新がかからず非公開のままです。

スクリーンショット 2022-11-28 193604.png

ページを再読み込みすると公開になります。

DBの方は値は変わっているため、useStateが悪いと思い、

情報を調べても解決することが出来ずに質問させていただいた次第です。

下記にコードを貼りますので、見ていただけますでしょうか。

 

 

const [badgedata, setBadgedata] = useState([]);
const [buttontext, setButtontext] = useState("公開");

//公開、非公開の初期値
  useEffect(() => {
    //location.reload(1);
    if(reviewdata.flag == 1){
      setButtontext("公開");
      setBadgedata("");
    } else {
      setButtontext("非公開");
      setBadgedata("");
    }
  });

  // クリック時のイベント
  const handleClick = () => {
    //window.location.reload(); //01
    if(reviewdata.flag == 1){ 
      setButtontext("公開");
      console.log(setButtontext);
    } else {
      setButtontext("非公開");
      console.log(setButtontext);
    }

 

 

01のところは試しにjsでリロードをかけてみましたが、思ったような動作ではありませんでした・・。

よろしくお願いいたします。

2件の返信2

株式会社フルバランス
Shopify Partner
1540 550 699

Daikussi 様

 

お世話になっております。

フルバランスの道家と申します。

 

ご質問確認いたしました。

reactの書き方どこかややこしいですよね。

 

推測ですが、useEffectに依存関係が指定されていないことが原因かもしれません。

 

以下のように、buttontextを依存関係に入れてると、buttontextの値を監視し、変更があるとuseEffect内の処理が実行されます。

 

  useEffect(() => {
      // 処理
  }, [buttontext]); // ←このように、監視する値を入れる

 

 

こちらのサイトがuseEffectの使い方がわかりやすいと思います。

https://reffect.co.jp/react/react-useeffect-understanding#useEffect-3

 

なにかヒントになれば幸いです。

 

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

 

分からない点があれば、またいつでもご連絡ください。

 

フルバランス 道家

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
daikussi
Shopify Partner
28 1 3

お世話になっております。

回答いただきありがとうございます。

頂いた回答を元に修正をしたところ私の環境では治すことが出来ませんでした。

リロードを書ければ文字が変わることは確認できているので、

location.reload();

でやってみたところうまくいきました。

 

今後も質問することがあるかと思いますが、

何卒よろしくお願いいたします。