Come rimuovere il nuovo firebase sul listenerAuthStateChanged in risposta

Question

Sto implementando l'autenticazione Firebase in un'applicazione web reattiva con react-router.

Un utente accede (at/signin) con Facebook o Google utilizzando l'accesso popup, quindi in caso di esito positivo si dirige all'app principale (/). Nel componente applicazione principale ascolto per un cambiamento di stato di autenticazione:

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

authListener ascolto per il cambio di autenticazione:

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'); 
     } 
    }); 
    } 

Tutto funziona bene, tranne quando i dati di login (e tornare a/signin) e accedi di nuovo usando Facebook o Google. Quindi viene visualizzato un messaggio di errore:

Avviso: setState (...): è possibile aggiornare solo un componente montato o montato.

Ho il sospetto che il listener onAuthStateChanged dall'app di accesso precedente ora non installata sia ancora in esecuzione.

C'è un modo per rimuovere il listener onAuthStateChanged quando il componente App smonta?

Answer 1

Anche i listener che hai impostato dovranno essere abbattuti.

I tuoi sospetti sono molto sul posto.

È necessario utilizzare il metodo del ciclo di vita componentWillUnmount per rimuovere eventuali ascoltatori rimasti che potrebbero inquinare l'app.

Per chiarire l'ascoltatore, ecco il codice rilevante:

All'interno della vostra funzione authListener è necessario salvare un riferimento per l'ascoltatore all'interno del componente (che viene restituito a voi come conseguenza della chiamata firebase.auth().onAuthStateChanged). Sarà un hook che rimuoverà l'ascoltatore e rimuoverlo.

Così, invece di limitarsi a chiamare esso, salvare il valore restituito come tale

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

E quando il componente ONU-monti, di questo codice:

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