1
00:00:02,510 --> 00:00:05,000
Beginnen wir damit, das Sternsymbol basierend darauf zu

2
00:00:05,020 --> 00:00:08,580
ändern, ob dies derzeit ein Favorit ist oder nicht. Ich möchte diesen

3
00:00:08,600 --> 00:00:14,390
gefüllten Stern nur dann haben, wenn er ein Favorit ist, und einen leeren Stern, wenn dies nicht der Fall ist.

4
00:00:14,390 --> 00:00:19,040
Am Ende des Essensdetailbildschirms müssen wir das Symbol, das wir hier rendern, basierend auf dem

5
00:00:19,040 --> 00:00:25,270
Lieblingsstatus dieser Mahlzeit, die wir hier geladen haben, austauschen. Das Problem hier ist wiederum, dass wir auf

6
00:00:25,350 --> 00:00:32,040
sehr einfache Weise in der Komponentenfunktion, aber nicht wirklich in den Navigationsoptionen herausfinden können, ob diese

7
00:00:32,040 --> 00:00:34,910
Mahlzeit ein Favorit ist oder nicht.

8
00:00:34,920 --> 00:00:42,010
Wir brauchen also wieder Parameter, um zwischen diesen beiden zu kommunizieren, aber insgesamt ist das nicht allzu schwierig.

9
00:00:43,620 --> 00:00:49,830
Was ich hier tun möchte, ist, dass ich meine Lieblingsgerichte mit Hilfe des Verwendungswählers in der Komponentenfunktion des Essensdetailbildschirms mit Hilfe

10
00:00:49,830 --> 00:00:56,260
von state und dann state erhalten möchte. Mahlzeiten. Lieblingsgerichte, also möchte ich alle

11
00:00:56,270 --> 00:01:01,380
meine Lieblingsgerichte bekommen und jetzt möchte ich einfach überprüfen, ob dieses Essen Teil des

12
00:01:04,190 --> 00:01:12,410
Lieblingsgerichts ist, und tatsächlich können wir dies verfeinern und sogar benennen, dass dieses aktuelle Essen das Lieblingsessen ist und in der Auswahl nicht

13
00:01:12,410 --> 00:01:18,830
einfach zurückkehren die Lieblingsgerichte, aber fügen Sie dort etwas mehr Logik hinzu und fügen Sie einfach eine

14
00:01:18,950 --> 00:01:23,300
Prüfung hinzu, bei der wir einige aufrufen. Dies ist auch eine

15
00:01:23,300 --> 00:01:30,170
integrierte Methode, die true zurückgibt, wenn die Bedingung, die wir angeben möchten, für mindestens ein Element darin wahr ist

16
00:01:30,320 --> 00:01:41,090
Array und dort überprüfe ich für jede Mahlzeit, die dort enthalten ist, ob die Mahlzeit-ID gleich der Mahlzeit-ID ist, die ich hier abrufe, und daher muss ich die Zeilen tauschen.

17
00:01:41,260 --> 00:01:46,570
Hier erhalte ich die Mahlzeit-ID der Mahlzeit, die wir auf dem Detailbildschirm laden,

18
00:01:46,570 --> 00:01:54,290
und überprüfe dann meine Lieblingsmahlzeiten, ob diese Mahlzeit-ID Teil davon ist, was bedeuten würde, dass diese Mahlzeit Teil unserer Favoriten ist.

19
00:01:54,320 --> 00:01:59,600
Damit haben wir diese aktuelle Mahlzeit als Lieblingsinformation, jetzt müssen wir sie an die Navigationsoptionen weitergeben

20
00:01:59,630 --> 00:02:07,010
und wieder können wir dies mit Verwendungseffekt tun, vielleicht dort unten. Stellen Sie hier wie zuvor eine Funktion in einer

21
00:02:07,010 --> 00:02:15,020
Reihe von Abhängigkeiten bereit. In der Funktion hier setze ich Requisiten-Navigations-Set-Parameter, um mehr Daten in meinen Parametern zusammenzuführen, und das ist vielleicht

22
00:02:15,050 --> 00:02:21,620
der is fav-Parameter. Der Name liegt bei Ihnen, was gilt Die aktuelle Mahlzeit ist der Lieblingswert, also ist

23
00:02:21,620 --> 00:02:27,740
der Wert, den wir gerade abgeleitet haben, und jetzt eine Abhängigkeit von dieser Funktion, von diesem

24
00:02:27,740 --> 00:02:33,710
Gebrauchseffektaufruf, den ich meine, natürlich die aktuelle Mahlzeit ist der Favorit. Wenn sich dies ändert, möchte

25
00:02:33,710 --> 00:02:41,170
ich die neuen Informationen an die Parameter weiterleiten und daher zum Header, sonst sollte dieser Effekt nicht erneut ausgeführt werden.

26
00:02:41,240 --> 00:02:48,740
Zurück in den Navigationsoptionen können wir diese Informationen hier abrufen. Der Favorit kann

27
00:02:48,740 --> 00:02:54,960
aus navigationData abgerufen werden. Navigation mit Hilfe von get param und dort nenne ich

28
00:02:54,980 --> 00:02:58,640
das ist fav, hier ist es, also ist das der Name, unter

29
00:02:59,460 --> 00:03:01,360
dem wir es abrufen können.

30
00:03:01,370 --> 00:03:06,080
Jetzt haben wir die Lieblingsinformationen in der Kopfzeile und können diese jetzt verwenden, um hier ein anderes Symbol

31
00:03:06,080 --> 00:03:06,610
zu rendern.

32
00:03:06,620 --> 00:03:12,260
Anstatt immer einen iOS-Stern zu rendern, werde ich hier einen dynamischen Ausdruck haben und prüfen, ob der

33
00:03:12,260 --> 00:03:13,610
Favorit wahr ist. Wenn

34
00:03:13,610 --> 00:03:17,440
dies der Fall ist, möchte ich den iOS-Stern verwenden, bei dem es

35
00:03:17,810 --> 00:03:18,500
sich

36
00:03:18,620 --> 00:03:22,220
um diesen Feldstern handelt. Ich werde iOS-Sternkonturen rendern und das wird

37
00:03:22,220 --> 00:03:23,570
ein leerer Stern sein.

38
00:03:24,730 --> 00:03:28,960
Damit haben wir hoffentlich ein Setup, das wie erwartet funktioniert.

39
00:03:29,020 --> 00:03:30,400
Wenn ich zu den Spaghetti

40
00:03:30,400 --> 00:03:32,760
gehe, ist dies jetzt ein leerer Stern, und wenn ich

41
00:03:32,770 --> 00:03:35,640
darauf klicke, ist es ein gefüllter Stern und gehört zu den Favoriten.

42
00:03:35,650 --> 00:03:41,020
Wenn ich dann hier zum Detailbildschirm gehe, dauert es ein bisschen, bis der Stern

43
00:03:41,020 --> 00:03:47,590
auch hier ausgefüllt ist. Wir müssen das beheben. Wenn ich jetzt hier klicke und wir zu den Mahlzeiten zurückkehren, dort wird

44
00:03:47,590 --> 00:03:53,660
es auch aktualisiert und das ist die Magie von Redux. Es aktualisiert einen Teil der Anwendung, wenn sich etwas in einem anderen Teil

45
00:03:53,740 --> 00:03:58,570
ändert. Genau so sollte es sich hier verhalten. Das funktioniert also im Allgemeinen.

46
00:03:58,570 --> 00:04:05,890
Das einzige, was nicht allzu schön war, ist, dass dieser Stern hier anfangs leer ist und erst nach

47
00:04:05,890 --> 00:04:08,640
dem Laden ausgefüllt wird. Wir können das

48
00:04:08,650 --> 00:04:15,760
beheben, aber ansonsten funktioniert dies so, wie es sollte. Um diesen anfänglich leeren Stern zu reparieren, können wir

49
00:04:15,880 --> 00:04:16,950
wieder eine

50
00:04:16,990 --> 00:04:21,400
Problemumgehung verwenden, die ich zuvor für diese anfänglichen Headerdaten erklärt habe.

51
00:04:21,550 --> 00:04:24,040
Wir möchten nicht warten, bis das erste

52
00:04:24,040 --> 00:04:29,140
Rendern abgeschlossen ist, sondern diese anfänglichen Daten an diese Komponente übergeben, wenn wir zu ihr navigieren.

53
00:04:30,090 --> 00:04:35,910
Daher ist es Zeit für die Essensliste, wo wir diese Navigationsaktion haben, um

54
00:04:35,910 --> 00:04:43,170
auch diesen Favoritenschlüssel weiterzuleiten. Dieser Schlüssel, den ich hier im Bildschirm mit den Essensdetails dort unten

55
00:04:44,040 --> 00:04:50,580
zu extrahieren versucht habe, ist param. Ich möchte den aktuellen Wert übergeben, wenn wir diese Komponente

56
00:04:50,790 --> 00:04:55,680
laden, wenn wir diesen Bildschirm hier aus der Essensliste laden. Dies ist die Komponente, die

57
00:04:56,390 --> 00:04:57,540
diese Navigation zu

58
00:04:57,690 --> 00:05:03,390
den Essensdetails und natürlich dort zu itemData auslöst. Artikel ist eine einzelne Mahlzeit, aber sie enthält keine Informationen darüber, ob dies Teil unserer Favoriten

59
00:05:03,390 --> 00:05:04,070
ist oder nicht,

60
00:05:04,180 --> 00:05:08,460
aber natürlich können wir herausfinden, ob dies der Fall ist oder nicht. In der Essensliste

61
00:05:08,460 --> 00:05:14,360
können wir auch auf den Redux-Store zugreifen, nicht nur über die Bildschirmkomponenten.

62
00:05:14,370 --> 00:05:22,260
Hier kann ich also auch den Use Selector von React Redux wie diesen verwenden und dann in meiner Komponente hier meine Lieblingsgerichte mit Hilfe

63
00:05:22,260 --> 00:05:31,560
des Use Selector abrufen, wo ich meinen Status erhalte und dann den Status zurückgebe. Mahlzeiten sind Lieblingsmahlzeiten, um alle meine Lieblingsmahlzeiten zu erhalten. Wenn

64
00:05:31,560 --> 00:05:34,150
wir nun einen einzelnen Mahlzeitartikel

65
00:05:34,260 --> 00:05:39,240
rendern, können wir damit herausfinden, ob dieser Mahlzeitartikel zu unseren Favoriten

66
00:05:39,240 --> 00:05:41,070
gehört. Übrigens können

67
00:05:41,100 --> 00:05:43,710
Sie dort keinen Verwendungsselektor verwenden, was

68
00:05:43,770 --> 00:05:49,680
keine gültige Verwendung wäre, da Sie React-Hooks nur auf der Stammebene Ihrer Komponentenfunktion verwenden dürfen,

69
00:05:49,680 --> 00:05:53,950
nicht in verschachtelten Funktionen oder verschachtelt, wenn Blöcke oder ähnliches.

70
00:05:53,970 --> 00:05:56,370
Daher ist die Verwendung des Verwendungswählers

71
00:05:57,430 --> 00:06:03,500
hier nicht zulässig, aber wir können dort natürlich unsere Lieblingsgerichte verwenden. Daher können wir hier

72
00:06:03,830 --> 00:06:12,890
herausfinden, ob dies ein Favorit ist, indem wir einfach die Lieblingsgerichte überprüfen und nach der Mahlzeit suchen, deren ID mit den itemData übereinstimmt

73
00:06:12,890 --> 00:06:14,840
.

74
00:06:14,840 --> 00:06:14,840
Artikel.

75
00:06:14,870 --> 00:06:20,990
id, also die ID der Mahlzeit, die wir gerade rendern. Daher enthält der Favorit den Artikel, den wir dort

76
00:06:20,990 --> 00:06:27,290
gefunden haben. Alternativ verwenden wir hier einen, der eine integrierte Javascript-Methode ist, die true zurückgibt, wenn ein Artikel

77
00:06:27,290 --> 00:06:29,930
in den Lieblingsgerichten dieser Bedingung entspricht.

78
00:06:29,930 --> 00:06:35,570
Wenn also der Favorit wahr ist, wissen wir, dass dieser Artikel ein Favorit ist, und können daher den

79
00:06:35,570 --> 00:06:40,300
Favoriten als Wert für den Favoriten verwenden, den wir als Anfangsparameter an den Detailbildschirm der

80
00:06:40,460 --> 00:06:44,930
Mahlzeit übergeben. Jetzt sollte dieser flackernde Stern, der anfangs leer ist, sein Weg.

81
00:06:44,930 --> 00:06:50,630
Wenn ich dies hier als Favorit markiere und dies verlasse und zurückkomme, wird es von

82
00:06:50,630 --> 00:06:51,550
Anfang an

83
00:06:51,590 --> 00:06:56,660
ausgefüllt, natürlich auch auf dem Lieblingsbildschirm. So können wir also mit Favoriten arbeiten. Stellen

84
00:06:56,730 --> 00:06:58,830
wir jetzt sicher, dass hier auf

85
00:06:58,830 --> 00:07:03,660
dem Favoritenbildschirm Dummy-Text angezeigt wird, falls wir keine Daten haben, die anderweitig angezeigt werden

86
00:07:03,680 --> 00:07:05,400
sollen. Danach kümmern wir uns

87
00:07:05,400 --> 00:07:06,960
um unsere Filter.