Ich implementiere firebase auth in einer react Web App mit react-router.
Ein Benutzer meldet sich an (entweder Facebook oder Google), indem er sich mit dem Pop-up-Zeichen anmeldet, und wenn er erfolgreich ist, route ich zur Haupt-App (/). In der Haupt-App-Komponente höre ich nach einer Änderung des Authentifizierungsstatus:
%Vor%authListener überwacht die automatische Änderung:
%Vor%Alles funktioniert gut, außer wenn ich mich abmelde (und zurück gehe / anmelde) und mich erneut über Facebook oder Google anmelde. Dann bekomme ich einen Fehler, der sagt:
Warnung: setState (...): Kann nur einen Mount oder Mounting aktualisieren Komponente.
Ich vermute, dass der onAuthStateChanged-Listener von der jetzt nicht angehängten zuvor eingeloggten Status-App noch ausgeführt wird.
Gibt es eine Möglichkeit, den onAuthStateChanged-Listener zu entfernen, wenn die App-Komponente unmounten?
Alle Listener, die Sie eingerichtet haben, müssen ebenfalls entfernt werden.
Ihr Verdacht ist sehr vor Ort.
Sie sollten die Lebenszyklusmethode componentWillUnmount verwenden, um alle übrig gebliebenen Listener zu entfernen könnte deine App verschmutzen.
Um den Hörer zu klären, hier ist der relevante Code:
Innerhalb Ihrer authListener -Funktion müssen Sie einen Verweis auf den Listener in Ihrer Komponente speichern (er wird Ihnen als Ergebnis des Aufrufs von firebase.auth().onAuthStateChanged zurückgegeben). Es wird ein Hook sein, der den Listener ablehnt und ihn entfernt.
Speichern Sie den zurückgegebenen Wert also nicht einfach, sondern
%Vor%Und wenn Ihre Komponente deinstalliert wird, verwenden Sie diesen Code:
%Vor% @Justin, weil onAuthStateChanged eine Funktion zurückgibt, mit der Sie den Listener löschen können ...
this.fireBaseListener = firebase.auth().onAuthStateChanged
docs: Ссылка
Gibt nicht-null-fire base.Promise zurück, die nicht-null-Array von Zeichenfolge enthält
Tags und Links firebase reactjs react-router firebase-authentication