useStateの値が更新されない

日本語 ディスカッション 技術的なQ＆A
1

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

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

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

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

スクリーンショット 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

Daikussi 様

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

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

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

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

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

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

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

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

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

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

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

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

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

フルバランス 道家

3

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

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

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

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

location.reload();

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

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

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