Wie können wir das Problem lösen, dass wir hier eine bestimmte Mahlzeit finden müssen und wir unseren Selektor hier
in den Navigationsoptionen nicht wirklich verwenden können?
Jetzt gibt es zwei mögliche Korrekturen - Korrektur Nummer eins ist, dass wir wieder die guten alten Parameter
verwenden, um zwischen Komponenten- und
Navigationsoptionen zu kommunizieren, wie ich es im Navigationsmodul gezeigt habe. Hier in der Komponente laden wir unsere Mahlzeit, also können wir
hier natürlich Requisiten-Navigations-Set-Parameter verwenden und jetzt die Parameter auf einen neuen Wert setzen. Jetzt können wir Set-Parameter verwenden, um die ausgewählte Mahlzeit oder ihren Titel an
die Kopfzeile weiterzuleiten und was auch immer Sie hier einstellen, es handelt sich übrigens um Parameter, die mit den vorhandenen
Parametern zusammengeführt werden, damit diese nicht überschrieben werden. Sie überschreiben also nicht Ihre Mahlzeit-ID, die Sie hier
abrufen, die immer noch da ist. Sie sind einfach Wenn Sie etwas Neues hinzufügen,
überschreiben Sie einen Parameter nur, wenn er bereits in den Parametern vorhanden ist.
Hier können wir also den Titel des Mahlzeitentitels hinzufügen und diesen auf die ausgewählte Mahlzeit setzen. Titel.
Dies bedeutet nun, dass ich diese Parameter an meinen Header gesendet habe, wenn diese Komponente am Ende gerendert wird.
Da dies nun die Requisiten ändert, landen wir normalerweise in einer Endlosschleife.
Um dies zu unterbrechen, verwenden wir hier den Verwendungseffekt, wie
ich ihn im Navigationsmodul gezeigt habe, und tun dies tatsächlich innerhalb des Verwendungseffekts.
Hier können wir also den Use-Effekt verwenden.
Als Abhängigkeit werde ich zunächst ein leeres Array angeben und dann hier innerhalb der Use-Effect-Funktion Parameter
festlegen. Hier
wird kein leeres Array angezeigt. Stattdessen wird hier meine Abhängigkeit ausgewählt Mahlzeit.
Wenn sich dies ändert, möchte ich die neuen Informationen an den Header weiterleiten. Jetzt werden wir sehen, ob das funktioniert, gehen wir zum Header
und dort
können wir das jetzt aus den Parametern abrufen.
Hier habe ich also meinen Mahlzeitentitel, den
ich mit navigationData bekommen kann. Navigation. getParam Mahlzeitentitel, das war der Name,
den ich gewählt habe, als ich die Parameter hier eingestellt habe.
Mit dem hier ausgewählten
Mahlzeitentitel können wir den Headertitel auf diesen Mahlzeitentitel setzen und diese Zeile auskommentieren, da sie sowieso nicht
funktioniert. Probieren Sie es aus.
Speichern wir dies und gehen wir zur Detailseite. Während dies funktioniert, werden
Sie ein Problem sehen. Wenn dies geladen wird, gibt es zunächst keinen Titel und
dieser erscheint erst nach einer Weile.
Erst wenn dies vollständig geladen ist, sehen wir den Titel-Pop, der nicht allzu
schön ist, und der Grund
dafür ist einfach, dass unsere Logik hier funktioniert. Da der Nutzungseffekt jedoch ausgeführt wird, nachdem
die Komponente zum ersten Mal gerendert wurde, warten wir Wenn die Komponente zum ersten
Mal gerendert wird, bis wir die Parameter an den Titel senden. Wenn dieser Übergang noch abgespielt wird
und das Rendern noch nicht vollständig abgeschlossen ist, wird dieser Titel nicht wirklich angezeigt.
Deshalb ist dies hier möglicherweise nicht die optimale
Lösung, und ich werde dies kommentieren. Eine bessere Lösung hier, so billig es auch klingen
mag, aber das ist auch eine Lösung, die Sie häufig verwenden können, besteht darin, dass Sie den Titel, den wir
hier benötigen, einfach aus der Komponente herausleiten, von der Sie kommen, damit Sie ihn laden Wenn Sie sich in der Komponente
befinden, die zu dieser Komponente wechselt, und Sie sie an diese Komponente senden, bevor sie geladen wird.
Senden wir also die Daten im Voraus und wir kommen
entweder vom Favoritenbildschirm oder vom Kategorie-Mahlzeitbildschirm. Dort tippen wir am Ende auf ein Element in der Essensliste und in
beiden Elementen verwenden wir in beiden Komponenten, dem Favoritenbildschirm und dem Kategoriemahlzeitbildschirm, eine Essensliste, was gut
ist, da dies bedeutet, dass wir hier und zur Essensliste gehen können Dort haben wir diese Navigationsaktion und jetzt, abgesehen von der Übergabe
der Essens-ID, wäre es gut, wenn wir hier bereits den Essens-Titel übergeben würden, weil wir ihn hier zur Verfügung haben, oder?
itemData. Artikel. Titel, das ist unser Titel des Essens. Indem wir es hier einfach bereitstellen, lösen
wir alle Probleme, die wir auf dem anderen Bildschirm haben. Das ist definitiv der Ansatz, den wir hier verwenden möchten.
Indem Sie diesen Parameter hier in der Komponente festlegen, in der wir diese Navigationsaktion auf der Seite mit den Essensdetails auslösen, haben wir
dieses Problem behoben, da Sie jetzt sehen, dass der Titel von Anfang an vorhanden ist und wir dort überhaupt kein Problem haben und
natürlich auch auch auf Android, wenn wir es dort ausprobieren. Mein Emulator ist nur ein bisschen langsam,
aber Sie können ihn dort im Allgemeinen auch sehen. Auf diese Weise können wir mit Daten im
Header arbeiten, wenn wir sie von Redux benötigen. Damit haben wir einen soliden ersten Zustand und können
unsere Redux-Daten verwenden. Was wir nicht wirklich tun können,
ist es zu ändern. Das ist der nächste Schritt. Wir möchten eine Logik hinzufügen, damit wir die Daten
ändern, Favoriten markieren und unsere Daten filtern können.