Ich habe dieses Problem, bei dem mein Code in der componentDidMount() -Methode beim Aktualisieren der aktuellen Seite (und anschließend der Komponente) nicht ordnungsgemäß ausgelöst wurde. Es funktioniert jedoch einwandfrei, wenn Sie nur durch Klicken auf die Links navigieren und durch meine Website navigieren. Aktualisieren Sie die aktuelle Seite? Keine Chance.
Ich habe festgestellt, dass das Problem darin besteht, dass componentWillUnmount() nicht ausgelöst wird, wenn ich die Seite aktualisiere und die Feinklick-Links auslöst und meine Website / App navigiert.
Die Auslösung von componentWillUnmount() ist für meine App entscheidend, da die Daten, die ich in der componentDidMount() -Methode lade und verarbeite, sehr wichtig sind, um Informationen für Benutzer anzuzeigen.
Ich brauche componentWillUnmount() , um beim Aktualisieren der Seite aufgerufen zu werden, weil ich in meiner Funktion componentWillMount() (die nach jeder Aktualisierung neu gerendert werden muss) eine einfache Filterung durchführe und diese Variable in einem Zustandswert abspeichere, der benötigt wird in der Statusvariable logos vorhanden sein, damit der Rest der Komponente funktioniert. Dies ändert sich nicht oder erhält während des Lebenszyklus der Komponente zu keinem Zeitpunkt neue Werte.
Klippen:
componentWillMount() method componentWillUnmount() nicht ausgelöst wird, wenn die Seite aktualisiert wird Wenn die Seite aktualisiert wird, hat sie nicht die Möglichkeit, die Komponenten wie üblich zu deaktivieren. Verwenden Sie das window.onbeforeunload -Ereignis, um einen Handler für die Aktualisierung festzulegen (lesen Sie die Kommentare im Code):
Ich habe auch auf dieses Problem gestoßen und festgestellt, dass ich sicherstellen musste, dass mindestens zwei Komponenten immer ordnungsgemäß aushängen. Also habe ich eine High-Order-Komponente erstellt, die sicherstellt, dass die umhüllte Komponente immer ausgehängt wird
Hinweis : Wenn Sie wie ich Turbolinks und Rails verwenden, möchten Sie vielleicht die beiden Ereignisse beforeunload und turbolinks:before-render aktivieren.
Ich sehe, dass diese Frage mehr als tausend Ansichten hat, also werde ich erklären, wie ich dieses Problem gelöst habe:
Um dieses spezielle Problem zu lösen, ist es am sinnvollsten, eine Komponente auf oberer Ebene zu erstellen, die Ihr Abonnement oder Ihre Datenbank lädt, sodass Sie die erforderlichen Daten laden, bevor Sie sie an Ihre untergeordnete Komponente übergeben %Code%. Außerdem können Sie die Berechnungen in der Komponente der oberen Ebene ausführen und sie einfach als Requisiten übergeben, die in Ihrer empfangenden Komponente verwendet werden sollen
Zum Beispiel:
%Vor% Im obigen Beispiel verwende ich den reaktiven Container von Meteor, um meine MongoDB-Daten abzurufen und darauf zu warten, dass die Anmeldung vollständig abgeschlossen ist, bevor ich die untergeordnete Komponente rende und mir die gewünschten Requisiten übergebe. Wenn Sie alle Ihre Daten in die Komponente auf höherer Ebene laden, müssen Sie sich nicht darauf verlassen, dass die Methode componentWillMount() nach jeder Aktualisierung ausgelöst wird. Die Daten sind in der übergeordneten Komponente bereit, sodass Sie sie in der untergeordneten Komponente beliebig verwenden können.
Tags und Links reactjs