発生しているエラー
Reactとfirebaseで会員登録を伴うアプリを作成しているのですが、会員登録(signup)、ログインをした際に下記のエラーが発生します。
console
1Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 2 in Login (created by Context.Consumer) 3 in Route (at App.jsx:30)
アプリ自体は普通に動いていて、ログイン後のリダイレクトもちゃんと行われています。
また、上記のWarningを調べてみたところ、useEffectのcleanup処理がうまく書けておらず、コンポーネントがunmountされた後に、コールバック関数が呼ばれて起きるらしいです。
ソースコード
該当箇所のソースコードは以下の通りです。
ユーザーがログイン操作を行い、firebaseの認証情報が変更されると、auth.onAuthStateChanged
の処理が走り、db(firestore)に値を取りに行きます。
この中で、いろんな場所にasync、awaitをつけてみたのですが、どれもうまくいかず。。。
useEffect(() => { const unsubscribe = auth.onAuthStateChanged(user => { if (user) { const uid = user.uid db.collection('users').doc(uid).get() .then(snapshot => { const data = snapshot.data() setCurrentUser(data) setLoading(false) }) } }) return unsubscribe }, [])
実現したいこと
Warnimgを無くしたいです。また、答えをいただいた場合、どうしてそのようなコードになったのかも教えていただきたいです。宜しくお願いいたします。
参考
React.useEffectで非同期処理をする場合の注意点2つ
React.useEffect でハマったポイントのまとめ
あなたの回答
tips
プレビュー