反応の中の新しいfirebase onAuthStateChangedリスナーを削除するには

Question

私は反応ルータを備えた反応ウェブアプリケーションでfirebase authを実装しています。

ユーザーは、ポップアップサインインを使用してFacebookまたはGoogleのいずれかでサインイン（サインイン）し、成功するとメインアプリ（/）にルーティングします。

componentWillMount() { 
    this.authListener = this.authListener.bind(this); 
    this.authListener(); 
    } 

authListenerは、認証の変更をリッスン：メインのアプリコンポーネントでは、私は、認証状態変化をリッスン

authListener() { 
    firebase.auth().onAuthStateChanged((user) => { 
     if (user) { 
     console.log('user changed..', user); 
     this.setState({ 
      User: { 
      displayName: user.displayName 
      } 
     }); 
     } else { 
     // No user is signed in. 
     browserHistory.push('/signin'); 
     } 
    }); 
    } 

すべては私がサインアウトする場合を除き、正常に動作します（バック/サインインに行きます）、FacebookやGoogleを使ってもう一度サインインしてください。次に、エラーメッセージが表示されます。

警告：setState（...）：マウントされているか取り付け中の コンポーネントのみを更新できます。

は私が状態のアプリでログインして今アンマウント以前からonAuthStateChangedリスナーがまだ実行されていると思われます。

AppコンポーネントがアンマウントするときにonAuthStateChangedリスナーを削除する方法はありますか？

Answer 1

あなたが設定したリスナーも解体する必要があります。

あなたの疑惑は非常に現実的です。

ライフサイクルメソッドcomponentWillUnmountを使用して、アプリを汚染する恐れのある残りのリスナーを削除する必要があります。あなたは（それがfirebase.auth().onAuthStateChangedを呼び出した結果として、あなたに返されます）コンポーネント内のリスナーへの参照を保存する必要があり、あなたのauthListener機能インサイド

：

がリスナーをクリアするには、ここに関連するコードです。リスナーの参照を解除して削除するフックになります。

だけではなく、それを呼び出すので、このコードを使用し、そのよう

this.fireBaseListener = firebase.auth().onAuthStateChanged ... 

そして、あなたのコンポーネントの未マウントとして返された値を保存します。

componentWillUnmount() { 
    this.fireBaseListener && this.fireBaseListener(); 
    this.authListener = undefined; 
}