Reactで英単語帳を自分で作れるアプリを作っています。
FirebaseHostingを用いてデプロイしてみたところデプロイ先では何も反映されておらず真っ白な画面になっていました。ソースコードとWebページのURLは下記のリンクで記載しています。どなたかお力をかしていただきたいです。ローカル環境では動作しているためデプロイの段階で何か間違えているんだと思います。
ソースコード: https://github.com/toma3desuyo/word_memorize.git
URL: https://word-memorize-ff102.web.app
下記の箇所で取得した際にnullになってしまうため落ちてしまうのではないでしょうか？
https://github.com/toma3desuyo/word_memorize/blob/main/src/App.js#L55
試しに手動でローカルストレージにデータを追加してみたところ表示されました。
@toma3desuyo
Questioner
コメントありがとうございます。今確認してきてみます
@toma3desuyo
Questioner
私も同じ操作をしてみたところ確かにWebページが反映されていました！具体的にはどのようにコードを修正すればnullが返されることを防げますか？
こんな感じで 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];
@toma3desuyo
Questioner
貴重なお時間を割いてアドバイスいただきありがとうございます。只今からソースコードの変更をおこなってきます。
@toma3desuyo
Questioner
今修正自分なりにしてみてデプロイとGithubの更新も行ったのですがまだ同じような状態です。どこか解釈が間違えていますでしょうか？（localStorageからの再取得は復習テストを終わったタイミングでもとのUserのカードを並び順も含めてリセットしたいため実装しています）
おそらくここで落ちてる気がします。
https://github.com/toma3desuyo/word_memorize/blob/main/src/WordTest.jsx#L7C9-L7C23
getItem('key')ではなくgetItem('cards')だったと思うのですが変更された理由ありますでしょうか？
@toma3desuyo
Questioner
ご指摘ありがとうございます。そこは完全にタイポしておりました！ただいま修正しましたが、どうやらまだ先ほどと同じページの表示になってしまっています。もう一度GitHubのコードをご確認していただけますか？
@toma3desuyo
Questioner
すみません。私のミスでbuildディレクトリを更新するのを忘れたままデプロイしていました！ 全て解決しました本当にありがとうございました！
URL開いてみましたが問題なく表示されていますね。
ご確認いただけますでしょうか？
https://word-memorize-ff102.web.app/
解決してよかったです！
解決したのであれば、クローズするといいですよ。
@toma3desuyo
Questioner
jinbeiさん、コメントありがとうございます😊始めてQiitaを使っているのでとても助かります。
