「フォーム送信後のリロード問題に挑む！」
TAKA: 「レビュー送信時にページがリロードされちゃうんだよね…。preventDefault()は効いてるはずなんだけど。」
AI老師: 「よかろう、今回はこのフォーム送信問題を徹底的に洗い直すぞ！」
状況の整理
ビデオ詳細ページにレビューを投稿しようとすると、送信直後にページがリロードされ、エラーで「動画が見つかりません」と表示される問題が発生中。コードにはevent.preventDefault()が記載されているが、期待通りの動作になっていない模様。
問題解決の手順
- preventDefault()の再確認 TAKA: 「そもそもpreventDefault()が効いてない可能性があるよね？」
AI老師: 「その通りだ。フォーム送信イベントがどこかで干渉されている可能性もある。」
修正ポイント
フォームの送信イベントを適切にキャプチャするコードを以下のように記載：
document.getElementById(‘review-form’).addEventListener(‘submit’, async (event) => {
event.preventDefault(); // フォームのデフォルト動作を停止
console.log(‘Form submission prevented’); // デバッグ用ログ
});
- 他のイベント干渉の可能性を排除 TAKA: 「HTMLやCSSでsubmitが何か別の処理に干渉されてるのかな？」
AI老師: 「それも考えられる。submitボタンやフォーム要素の設定を見直すべきじゃ。」 - トークン確認
ローカルストレージからトークンが正しく取得されているか確認：
const token = localStorage.getItem(‘token’); // ローカルストレージからトークンを取得
console.log(‘Token:’, token);
- サーバー側のログでリクエスト確認
サーバーでPOSTリクエストが受信されているか、ログを確認：
console.log(‘POST /api/reviews called’);
console.log(‘Request body:’, req.body);
TAKAの今日のまとめ
TAKA: 「フォーム送信イベントが正しく動作してない原因を少しずつ絞れてきた気がする！preventDefault()が効いてないかもしれないけど、他にもイベントが干渉してる可能性があるんだよね。」
AI老師: 「そうじゃ。今は一つずつ確認していくのみじゃ。ログやブラウザの動作を見て、問題箇所を潰していこうぞ。」