解決済
「Django REST Framework + NextJSでインスタ風画像投稿サイト構築」のプロフィール編集 では、どこのコードで、変更されたユーザー情報を取得し、随時、ブラウザに反映しているのか、理解したい
React
2023/03/04 03:16
実現したいこと
「Django REST Framework + NextJSでインスタ風画像投稿サイト構築」のプロフィール編集の仕組みがわかりません。
発生している問題
ユーザーがログインした時に、「/actions/auth.js/user()」関数が実行され、ユーザー情報を取得し、ユーザー情報の状態を保持し、今、ユーザー情報の状態を呼び出して、変数「user」にユーザー情報を格納しました。
その後、プロフィールを編集した後も、変数「user」の中身に変化はないと思われます。
以下のコードでにて、useEffect()は、今のユーザーの名前を初期値として、設定しているだけです。
ユーザー情報が変更された際、変更されたユーザー情報を取得、状態保持するため、どこのコードで、「/actions/auth.js/user()」関数を、もう一度、実行したのでしょうか？
どこで、もう一度、「/actions/auth.js/user()」関数を実行し、プロフィール編集にて変更されたユーザー情報が状態に保持されたのでしょうか？
初歩的な質問だと分かっているのですが、どうしても、仕組みが理解できません。
ソースコード
pages/profile.js
const user = useSelector((state) => state.auth.user)
useEffect(() => {
if (user) {
setFormData({
name: user.name,
})
}
}, [user])
自分で試したこと
補足情報
回答 4件
回答するにはログインが必要です
解決しました。
「Django + NextJSでインスタ風画像投稿サイト構築チュートリアル」動画の48:12にて、
// プロフィール編集成功
if (edit_profile_success) {
router.push('/')
}
と、「編集した内容でを実行する」ボタンを押して、編集に成功すると、プロフィール編集ページの外に出て、トップページに移動するのですね。
そして、また、「編集する」ボタンを押すと、プロフィール編集ページの中に入り、
const user = useSelector((state) => state.auth.user)
のコードが実行され、最新のユーザー情報が変数「user」に入る仕組みなのですね。
変更された最新のユーザー情報は、随時、自動で、変数「user」に入っていくわけでは、ありませんでした。
状態の内容の変化を、ずっと監視しているわけでもありませんでした。
質問を書くことで、独り言を言うことで、頭の中が整理整頓され、問題解決の糸口が見えました。
ありがとうございました。
2
良かったです。
私はnext js を使ったことはないです。
回答出来なかった。すいません
宜しくお願い致します。
グエンさん、ご意見ありがとうございます。
ということで、もう一度、「Django + NextJSでインスタ風画像投稿サイト構築チュートリアル」動画を見直してみました。
そうしますと、動画の50:50から51:23にて、ユーザー情報変更ボタンをクリックした後、いろいろな処理が実行され、最後に、use()関数を、もう一度、実行し、変更された最新のユーザー情報を状態に代入していました。
さらっと、dispatchを使って、use()関数を実行しているので、見落としていました。
ユーザー情報変更ボタンを押した後の流れとしては、
-
Next.jsのAPIにて、アクセストークンを取得
-
そのアクセストークンを添えて、DjangoのAPIにリスエストを出し、変更されたユーザー情報をデータベースに保存
-
データベース保存に成功したら、200ステータスが返ってくる
-
200ステータスが返ってきたら、use()関数を、もう一度、実行し、最新のユーザー情報を状態に代入、保持する。
なるほど。
しかし、ここで、また疑問が。
「/pages/profile.js」ファイルにて、
const user = useSelector((state) => state.auth.user)
と書いておくだけで、変更された最新のユーザー情報は、随時、自動で、変数「user」に入っていくのでしょうか？
状態の内容の変化を、ずっと監視しているのでしょうか？
この部分がまだ、ピンとこないですが、だいぶ、正解に近づいてきました。
あと、もう一歩。
1
--
全体、コードを見ないとわからないです。
的外れかもしれないけど
恐れく djangoのview.py内で処理してるかもしれません。
又は JavaScriptを理解してないと、難しいですね。
1