Ich arbeite an einer React-Anwendung mit React-Router. Ich habe eine Projektseite mit einer URL wie folgt:
myapplication.com/project/unique-project-id
Wenn die Projektkomponente geladen wird, löse ich eine Datenanforderung für dieses Projekt aus dem Ereignis componentDidMount aus. Ich stoße jetzt auf ein Problem, bei dem sich nur die ID so ändert, wenn ich direkt zwischen zwei Projekten wechsle ...
myapplication.com/project/982378632
myapplication.com/project/782387223
myapplication.com/project/198731289
componentDidMount wird nicht erneut ausgelöst, sodass die Daten nicht aktualisiert werden. Gibt es ein anderes Lebenszyklusereignis, mit dem ich meine Datenanforderung auslösen sollte, oder eine andere Strategie, um dieses Problem anzugehen?
reactjs
react-router
Konstelliert
quelle
quelle
Antworten:
Wenn der Link mit nur einem anderen Parameter auf dieselbe Route verweist, wird er nicht erneut bereitgestellt, sondern erhält stattdessen neue Requisiten. Sie können also die
componentWillReceiveProps(newProps)
Funktion verwenden und suchennewProps.params.projectId
.Wenn Sie versuchen, Daten zu laden, würde ich empfehlen, die Daten abzurufen, bevor der Router die Übereinstimmung mit statischen Methoden für die Komponente verarbeitet. Schauen Sie sich dieses Beispiel an. Reagiere auf Router Mega Demo . Auf diese Weise lädt die Komponente die Daten und aktualisiert sie automatisch, wenn sich die Routenparameter ändern, ohne sich darauf verlassen zu müssen
componentWillReceiveProps
.quelle
state
an sie. Es ist zunächst etwas verwirrend, wird dann aber etwas klarer.Wenn Sie bei Routenänderungen eine erneute Bereitstellung von Komponenten benötigen, können Sie einen eindeutigen Schlüssel an das Schlüsselattribut Ihrer Komponente übergeben (der Schlüssel ist Ihrem Pfad / Ihrer Route zugeordnet). Jedes Mal, wenn sich die Route ändert, ändert sich auch der Schlüssel, wodurch die React-Komponente zum Aufheben / erneuten Bereitstellen ausgelöst wird. Ich habe die Idee von dieser Antwort
quelle
Hier ist meine Antwort, ähnlich wie bei einigen der oben genannten, jedoch mit Code.
quelle
Sie müssen sich darüber im Klaren sein, dass eine Routenänderung keine Seitenaktualisierung verursacht. Sie müssen dies selbst tun.
quelle
Wenn Sie haben:
In React 16.8 und höher können Sie mit Hooks Folgendes tun:
Dort lösen Sie nur
fetchResource
beiprops.match.params.id
Änderungen einen neuen Anruf aus .quelle
componentWillReceiveProps
Basierend auf den Antworten von @wei, @ Breakpoint25 und @PaulusLimma habe ich diese Ersatzkomponente für die
<Route>
. Dadurch wird die Seite erneut bereitgestellt, wenn sich die URL ändert. Dadurch werden alle Komponenten auf der Seite erstellt und erneut bereitgestellt und nicht nur neu gerendert. AllecomponentDidMount()
und alle anderen Start-Hooks werden auch bei der URL-Änderung ausgeführt.Die Idee ist, die Komponenteneigenschaft zu ändern,
key
wenn sich die URL ändert, und dies zwingt React, die Komponente erneut bereitzustellen.Sie können es beispielsweise als Ersatz für
<Route>
Folgendes verwenden:Die
<RemountingRoute>
Komponente ist wie folgt definiert:Dies wurde mit React-Router 4.3 getestet.
quelle
Die Antwort von @ wei funktioniert gut, aber in einigen Situationen finde ich es besser, keinen Schlüssel für die innere Komponente festzulegen, sondern sich selbst zu routen. Wenn der Pfad zur Komponente statisch ist, Sie jedoch möchten, dass die Komponente jedes Mal neu bereitgestellt wird, wenn der Benutzer zu ihr navigiert (möglicherweise um einen API-Aufruf bei componentDidMount () durchzuführen), ist es praktisch, location.pathname auf den Schlüssel der Route zu setzen. Damit wird die Route und der gesamte Inhalt erneut bereitgestellt, wenn sich der Standort ändert.
quelle
So habe ich das Problem gelöst:
Diese Methode ruft das einzelne Element von der API ab:
Ich rufe diese Methode von componentDidMount auf. Diese Methode wird nur einmal aufgerufen, wenn ich diese Route zum ersten Mal lade:
Und von componentWillReceiveProps, die seit dem zweiten Laden aufgerufen werden, laden wir dieselbe Route, aber unterschiedliche ID, und ich rufe die erste Methode auf, um den Status neu zu laden, und dann lädt die Komponente das neue Element.
quelle
Wenn Sie Class Component verwenden, können Sie componentDidUpdate verwenden
quelle
Sie können die bereitgestellte Methode verwenden:
Wenn garantiert wird, dass die Komponente nach einer Routenänderung erneut gerendert wird, können Sie Requisiten als Abhängigkeit übergeben
Nicht der beste Weg, aber gut genug, um mit dem umzugehen, wonach Sie suchen, laut Kent C Dodds : Überlegen Sie mehr, was passiert sein soll.
quelle
react-router
ist fehlerhaft, da Komponenten bei jeder Standortänderung erneut bereitgestellt werden müssen.Ich habe es jedoch geschafft, eine Lösung für diesen Fehler zu finden:
https://github.com/ReactTraining/react-router/issues/1982#issuecomment-275346314
Kurz gesagt (siehe den Link oben für vollständige Informationen)
Dadurch wird es bei jeder URL-Änderung erneut bereitgestellt
quelle