Reactアプリがデプロイによって反映されない

Comments

1. 

   @toma3desuyo

   Questioner

   more_horiz

   コメントありがとうございます。今確認してきてみます

2. 

   @toma3desuyo

   Questioner

   more_horiz

   私も同じ操作をしてみたところ確かにWebページが反映されていました！具体的にはどのようにコードを修正すればnullが返されることを防げますか？

3. 

   @takengineer1216

   more_horiz

   こんな感じで userCards が存在してるときにだけセットするようにすれば防げるのではないでしょうか？

       if (userCards) {
         const userCardsArray = JSON.parse(userCards);
         userCardsArray.map((card) => (card.buttonText = "日本語を表示"));
         setCards(userCardsArray);
         localStorage.setItem("cards", JSON.stringify(userCardsArray));
       }
   

   あとはWordTest.jsx にも同じ記述があるので修正の必要があるかもしれません。
   https://github.com/toma3desuyo/word_memorize/blob/main/src/WordTest.jsx#L8

   propsで受け取ったcardsをそのままスプレッド構文で展開すればWordTest.jsxでデータを取得する処理はそもそも不要な気がするのですが、いかがでしょうか？

   const shuffledArray = [...cards];
   

4. 

   @toma3desuyo

   Questioner

   more_horiz

   貴重なお時間を割いてアドバイスいただきありがとうございます。只今からソースコードの変更をおこなってきます。

5. 

   @toma3desuyo

   Questioner

   more_horiz

   今修正自分なりにしてみてデプロイとGithubの更新も行ったのですがまだ同じような状態です。どこか解釈が間違えていますでしょうか？（localStorageからの再取得は復習テストを終わったタイミングでもとのUserのカードを並び順も含めてリセットしたいため実装しています）

6. 

   @takengineer1216

   more_horiz

   おそらくここで落ちてる気がします。
   https://github.com/toma3desuyo/word_memorize/blob/main/src/WordTest.jsx#L7C9-L7C23

   getItem('key')ではなくgetItem('cards')だったと思うのですが変更された理由ありますでしょうか？

7. 

   @toma3desuyo

   Questioner

   more_horiz

   ご指摘ありがとうございます。そこは完全にタイポしておりました！ただいま修正しましたが、どうやらまだ先ほどと同じページの表示になってしまっています。もう一度GitHubのコードをご確認していただけますか？

8. 

   @toma3desuyo

   Questioner

   more_horiz

   すみません。私のミスでbuildディレクトリを更新するのを忘れたままデプロイしていました！　全て解決しました本当にありがとうございました！

9. 

   @takengineer1216

   more_horiz

   URL開いてみましたが問題なく表示されていますね。
   ご確認いただけますでしょうか？
   https://word-memorize-ff102.web.app/

10. 

    @takengineer1216

    more_horiz

    解決してよかったです！

11. 

    @jinbei230525

    more_horiz

    解決したのであれば、クローズするといいですよ。

12. 

    @toma3desuyo

    Questioner

    more_horiz

    jinbeiさん、コメントありがとうございます😊始めてQiitaを使っているのでとても助かります。