1 00:00:02,170 --> 00:00:10,150 Wie können wir das Problem lösen, dass wir hier eine bestimmte Mahlzeit finden müssen und wir unseren Selektor hier 2 00:00:10,600 --> 00:00:13,600 in den Navigationsoptionen nicht wirklich verwenden können? 3 00:00:13,600 --> 00:00:19,960 Jetzt gibt es zwei mögliche Korrekturen - Korrektur Nummer eins ist, dass wir wieder die guten alten Parameter 4 00:00:19,990 --> 00:00:22,190 verwenden, um zwischen Komponenten- und 5 00:00:22,210 --> 00:00:29,470 Navigationsoptionen zu kommunizieren, wie ich es im Navigationsmodul gezeigt habe. Hier in der Komponente laden wir unsere Mahlzeit, also können wir 6 00:00:29,470 --> 00:00:37,310 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 7 00:00:37,310 --> 00:00:43,300 die Kopfzeile weiterzuleiten und was auch immer Sie hier einstellen, es handelt sich übrigens um Parameter, die mit den vorhandenen 8 00:00:43,300 --> 00:00:48,340 Parametern zusammengeführt werden, damit diese nicht überschrieben werden. Sie überschreiben also nicht Ihre Mahlzeit-ID, die Sie hier 9 00:00:48,340 --> 00:00:52,630 abrufen, die immer noch da ist. Sie sind einfach Wenn Sie etwas Neues hinzufügen, 10 00:00:52,870 --> 00:00:56,840 überschreiben Sie einen Parameter nur, wenn er bereits in den Parametern vorhanden ist. 11 00:00:56,920 --> 00:01:04,030 Hier können wir also den Titel des Mahlzeitentitels hinzufügen und diesen auf die ausgewählte Mahlzeit setzen. Titel. 12 00:01:04,050 --> 00:01:13,120 Dies bedeutet nun, dass ich diese Parameter an meinen Header gesendet habe, wenn diese Komponente am Ende gerendert wird. 13 00:01:15,800 --> 00:01:20,270 Da dies nun die Requisiten ändert, landen wir normalerweise in einer Endlosschleife. 14 00:01:20,270 --> 00:01:24,710 Um dies zu unterbrechen, verwenden wir hier den Verwendungseffekt, wie 15 00:01:24,800 --> 00:01:29,780 ich ihn im Navigationsmodul gezeigt habe, und tun dies tatsächlich innerhalb des Verwendungseffekts. 16 00:01:29,780 --> 00:01:32,690 Hier können wir also den Use-Effekt verwenden. 17 00:01:35,230 --> 00:01:41,430 Als Abhängigkeit werde ich zunächst ein leeres Array angeben und dann hier innerhalb der Use-Effect-Funktion Parameter 18 00:01:41,440 --> 00:01:42,320 festlegen. Hier 19 00:01:42,520 --> 00:01:47,290 wird kein leeres Array angezeigt. Stattdessen wird hier meine Abhängigkeit ausgewählt Mahlzeit. 20 00:01:47,290 --> 00:01:55,150 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 21 00:01:55,150 --> 00:01:56,250 und dort 22 00:01:56,350 --> 00:01:59,050 können wir das jetzt aus den Parametern abrufen. 23 00:01:59,050 --> 00:02:01,720 Hier habe ich also meinen Mahlzeitentitel, den 24 00:02:02,080 --> 00:02:09,240 ich mit navigationData bekommen kann. Navigation. getParam Mahlzeitentitel, das war der Name, 25 00:02:09,240 --> 00:02:12,660 den ich gewählt habe, als ich die Parameter hier eingestellt habe. 26 00:02:19,700 --> 00:02:21,590 Mit dem hier ausgewählten 27 00:02:21,590 --> 00:02:28,190 Mahlzeitentitel können wir den Headertitel auf diesen Mahlzeitentitel setzen und diese Zeile auskommentieren, da sie sowieso nicht 28 00:02:28,200 --> 00:02:30,140 funktioniert. Probieren Sie es aus. 29 00:02:30,140 --> 00:02:35,660 Speichern wir dies und gehen wir zur Detailseite. Während dies funktioniert, werden 30 00:02:35,660 --> 00:02:40,410 Sie ein Problem sehen. Wenn dies geladen wird, gibt es zunächst keinen Titel und 31 00:02:40,430 --> 00:02:42,140 dieser erscheint erst nach einer Weile. 32 00:02:42,140 --> 00:02:47,350 Erst wenn dies vollständig geladen ist, sehen wir den Titel-Pop, der nicht allzu 33 00:02:47,360 --> 00:02:49,530 schön ist, und der Grund 34 00:02:49,790 --> 00:02:55,340 dafür ist einfach, dass unsere Logik hier funktioniert. Da der Nutzungseffekt jedoch ausgeführt wird, nachdem 35 00:02:55,340 --> 00:03:00,770 die Komponente zum ersten Mal gerendert wurde, warten wir Wenn die Komponente zum ersten 36 00:03:00,770 --> 00:03:06,980 Mal gerendert wird, bis wir die Parameter an den Titel senden. Wenn dieser Übergang noch abgespielt wird 37 00:03:06,980 --> 00:03:12,400 und das Rendern noch nicht vollständig abgeschlossen ist, wird dieser Titel nicht wirklich angezeigt. 38 00:03:12,680 --> 00:03:15,630 Deshalb ist dies hier möglicherweise nicht die optimale 39 00:03:15,650 --> 00:03:20,960 Lösung, und ich werde dies kommentieren. Eine bessere Lösung hier, so billig es auch klingen 40 00:03:21,060 --> 00:03:26,310 mag, aber das ist auch eine Lösung, die Sie häufig verwenden können, besteht darin, dass Sie den Titel, den wir 41 00:03:26,310 --> 00:03:31,800 hier benötigen, einfach aus der Komponente herausleiten, von der Sie kommen, damit Sie ihn laden Wenn Sie sich in der Komponente 42 00:03:31,800 --> 00:03:36,510 befinden, die zu dieser Komponente wechselt, und Sie sie an diese Komponente senden, bevor sie geladen wird. 43 00:03:36,510 --> 00:03:42,090 Senden wir also die Daten im Voraus und wir kommen 44 00:03:42,090 --> 00:03:49,880 entweder vom Favoritenbildschirm oder vom Kategorie-Mahlzeitbildschirm. Dort tippen wir am Ende auf ein Element in der Essensliste und in 45 00:03:49,890 --> 00:03:54,240 beiden Elementen verwenden wir in beiden Komponenten, dem Favoritenbildschirm und dem Kategoriemahlzeitbildschirm, eine Essensliste, was gut 46 00:03:54,240 --> 00:04:00,420 ist, da dies bedeutet, dass wir hier und zur Essensliste gehen können Dort haben wir diese Navigationsaktion und jetzt, abgesehen von der Übergabe 47 00:04:00,420 --> 00:04:06,330 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? 48 00:04:06,540 --> 00:04:13,350 itemData. Artikel. Titel, das ist unser Titel des Essens. Indem wir es hier einfach bereitstellen, lösen 49 00:04:13,350 --> 00:04:17,950 wir alle Probleme, die wir auf dem anderen Bildschirm haben. Das ist definitiv der Ansatz, den wir hier verwenden möchten. 50 00:04:18,090 --> 00:04:24,060 Indem Sie diesen Parameter hier in der Komponente festlegen, in der wir diese Navigationsaktion auf der Seite mit den Essensdetails auslösen, haben wir 51 00:04:24,060 --> 00:04:30,270 dieses Problem behoben, da Sie jetzt sehen, dass der Titel von Anfang an vorhanden ist und wir dort überhaupt kein Problem haben und 52 00:04:30,270 --> 00:04:36,180 natürlich auch auch auf Android, wenn wir es dort ausprobieren. Mein Emulator ist nur ein bisschen langsam, 53 00:04:36,180 --> 00:04:43,380 aber Sie können ihn dort im Allgemeinen auch sehen. Auf diese Weise können wir mit Daten im 54 00:04:43,380 --> 00:04:50,850 Header arbeiten, wenn wir sie von Redux benötigen. Damit haben wir einen soliden ersten Zustand und können 55 00:04:50,850 --> 00:04:54,830 unsere Redux-Daten verwenden. Was wir nicht wirklich tun können, 56 00:04:54,900 --> 00:04:59,790 ist es zu ändern. Das ist der nächste Schritt. Wir möchten eine Logik hinzufügen, damit wir die Daten 57 00:04:59,880 --> 00:05:01,890 ändern, Favoriten markieren und unsere Daten filtern können.