Reactにてfirebaseの関数内でsetStateが使えない

Question

前提・実現したいこと

Reactの環境にてfirebase-toolsのonAuthStateChanged関数でuserデータを受け取って保持したいのですが、どういじってもsetStateが使えません。

発生している問題・エラーメッセージ

n.setState is not function

該当のソースコード

import Firebase, { Firestore } from './Firebase';

export default class Auth {
    constructor(props) {
        this.state = {
            user: null,
        };
    }

    initialization = () => {
        Firebase.auth().onAuthStateChanged(function(user) {
            if (user) {
                console.log(user);
                this.setState({ user: user }); // エラー箇所
                console.log(this.state.user);
            } else {
                console.log("user is null");
            }
        });
    }
}

試したこと

this.setStateの行を別の関数にうつして、その関数を呼び出し。

import Firebase, { Firestore } from './Firebase';

export default class Auth {
    constructor(props) {
        this.state = {
            user: null,
        };
    }

    initialization = () => {
        Firebase.auth().onAuthStateChanged(function(user) {
            if (user) {
                console.log(user);
                this.setUserState(user);
                console.log(this.state.user);
            } else {
                console.log("user is null");
            }
        });
    }

    setUserState = user => {
        this.setState({ user: user }); // エラー箇所
    }
}

function (user)を別の関数にうつして、その関数を呼び出し。

import Firebase, { Firestore } from './Firebase';

export default class Auth {
    constructor(props) {
        this.state = {
            user: null,
        };
    }

    initialization = () => {
        Firebase.auth().onAuthStateChanged(onAuthStateChanged);
    }

    onAuthStateChanged = user => {
        if (user) {
            console.log(user);
            this.setUserState(user);
            console.log(this.state.user);
        } else {
            console.log("user is null");
        }
    }

    setUserState = user => {
        this.setState({ user: user }); // エラー箇所
    }
}

それぞれの関数をconstructorでbind(this)。

export default class Auth {
    constructor(props) {
        this.state = {
            user: null,
        };

        this.initialization = this.initialization.bind(this);
        this.onAuthStateChanged = this.onAuthStateChanged.bind(this);
        this.setUserState = this.setUserState.bind(this);
    }

    initialization = () => {
        Firebase.auth().onAuthStateChanged(onAuthStateChanged);
    }

    onAuthStateChanged = user => {
        if (user) {
            console.log(user);
            this.setUserState(user);
            console.log(this.state.user);
        } else {
            console.log("user is null");
        }
    }

    setUserState = user => {
        this.setState({ user: user }); // エラー箇所
    }
}

useStateに置き換え。
エラー→https://reactjs.org/docs/error-decoder.html/?invariant=321

import { useState } from "react";
import Firebase, { Firestore } from './Firebase';

export default class Auth {
    constructor(props) {
        this.initialization = this.initialization.bind(this);
    }

    initialization = () => {
        Firebase.auth().onAuthStateChanged(user => {
            const [user_, setUser] = useState(null); // エラー箇所
            if (user) {
                console.log(user);
                setUser(user);
                console.log(user_);
            } else {
                console.log("user is null");
            }
        });
    }
}

Promiseを使用

import Firebase, { Firestore } from './Firebase';

export default class Auth {
    constructor(props) {
        this.state = {
            user: null,
        };

        this.initialization = this.initialization.bind(this);
    }

    initialization = () => {
        return new Promise((resolve, reject) => {
            Firebase.auth().onAuthStateChanged(user => {
                if (user) {
                    resolve(user);
                } else {
                    reject(null);
                }
            });
        }).then(user => {
            console.log(user);
            this.setState({ user: user }); // エラー箇所
            console.log(this.state.user);
        }).catch(() => console.log("user is null"));
    }
}

補足情報（FW/ツールのバージョンなど）

"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"date-fns": "^2.16.1",
"esri-leaflet-geocoder": "^2.3.4",
"firebase": "^8.2.1",
"firebase-tools": "^9.2.0",
"formik": "^2.2.6",
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-leaflet": "^3.0.5",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"styled-components": "^5.2.1",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"

Comments

[hoshi-takanori]

クラスコンポーネントの場合、this が何を指しているかをご確認ください。

[3aki]

クラスを指しています。

[hoshi-takanori]

function キーワードを使った無名関数の場合、this が指すものは無名関数の呼ばれ方によりますが、たぶん期待するオブジェクトにはなってないと思います。bind(this) するか、アロー関数にする必要があるのでは。

[3aki]

試したことに有る通り、試しています。

Answer 1

とりあえずこれで動きました。

• Auth を React のクラスコンポーネントにしないと setState は使えないので、React.Component を継承しました。
• initialization というメソッドは勝手には呼ばれないと思うので、constructor で呼びましょう。(Auth を unmount する可能性があるなら、componentDidMount で initialization を呼んで、componentWillUnmount で unsubscribe した方がいいかも。)
• this.setState の this をバインドするには、initialization そのものと、onAuthStateChanged に渡す無名関数の両方を bind(this) するか、アロー関数にする必要があります。

import React from 'react';
import Firebase from 'firebase/app';
import 'firebase/auth';

export default class Auth extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: null,
        };
        this.initialization();
    }

    initialization = () => {
        Firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                console.log(user);
                this.setState({ user: user });
                console.log(this.state.user);
            } else {
                console.log("user is null");
            }
        });
    }

    render() {
        const user = this.state.user;
        return (
            <p>Auth: {user ? user.uid : 'none'}</p>
        );
    }
}

Comments

[3aki]

setStateってJavaScriptの機能じゃないんですね、知りませんでした。
initializationは訳合ってAuth呼び出し元でauth.initialization()しています。
thisをバインドするのに「bind(this) する」のはわかるのですが、「アロー関数にする」のでも問題ないということでしょうか？それはアロー関数にするとバインドの効果も得られるということでしょうか？
（あと、bind(this）もアロー関数も気持ち悪いので他の方法はあったりしますでしょうか？）

[hoshi-takanori]

Auth をご自分で呼び出してるとしたら、それは React コンポーネントではないってことでは？
そうだとすると回答の前提が成り立ちませんね…。

「bind(this）もアロー関数も気持ち悪い」と言われても、JavaScript はそういう言語なので…。
なお、bind(this) とアロー関数ではメカニズムが全然違って、アロー関数は this を特別扱いしないので、アロー関数が作られた時 (つまりオブジェクト生成時) の this がそのまま使われるってことになります。
https://qiita.com/suin/items/a44825d253d023e31e4d

[maisumakun]

> あと、bind(this）もアロー関数も気持ち悪いので他の方法はあったりしますでしょうか？

それで納得がいくかどうかはともかく、「thisを別の名前の変数に入れておいて、コールバックではそちらを参照する」ような方法も考えられます。

[3aki]

> Auth をご自分で呼び出してるとしたら、それは React コンポーネントではないってことでは？
そうだとすると回答の前提が成り立ちませんね…。

これの「Auth をご自分で呼び出してるとしたら、それは React コンポーネントではない」の意味がわからないです。React.Componentを継承しても呼び出したらReact.Componentが無視されるということでしょうか？

url先、この後で読んでみます。
thisを別の名前の変数に入れるというのもなかなかに違和感を感じるので、まだラムダ式に馴染みのあるアロー関数を使うことにします。