Beginnen wir damit, das Sternsymbol basierend darauf zu
ändern, ob dies derzeit ein Favorit ist oder nicht. Ich möchte diesen
gefüllten Stern nur dann haben, wenn er ein Favorit ist, und einen leeren Stern, wenn dies nicht der Fall ist.
Am Ende des Essensdetailbildschirms müssen wir das Symbol, das wir hier rendern, basierend auf dem
Lieblingsstatus dieser Mahlzeit, die wir hier geladen haben, austauschen. Das Problem hier ist wiederum, dass wir auf
sehr einfache Weise in der Komponentenfunktion, aber nicht wirklich in den Navigationsoptionen herausfinden können, ob diese
Mahlzeit ein Favorit ist oder nicht.
Wir brauchen also wieder Parameter, um zwischen diesen beiden zu kommunizieren, aber insgesamt ist das nicht allzu schwierig.
Was ich hier tun möchte, ist, dass ich meine Lieblingsgerichte mit Hilfe des Verwendungswählers in der Komponentenfunktion des Essensdetailbildschirms mit Hilfe
von state und dann state erhalten möchte. Mahlzeiten. Lieblingsgerichte, also möchte ich alle
meine Lieblingsgerichte bekommen und jetzt möchte ich einfach überprüfen, ob dieses Essen Teil des
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
einfach zurückkehren die Lieblingsgerichte, aber fügen Sie dort etwas mehr Logik hinzu und fügen Sie einfach eine
Prüfung hinzu, bei der wir einige aufrufen. Dies ist auch eine
integrierte Methode, die true zurückgibt, wenn die Bedingung, die wir angeben möchten, für mindestens ein Element darin wahr ist
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.
Hier erhalte ich die Mahlzeit-ID der Mahlzeit, die wir auf dem Detailbildschirm laden,
und überprüfe dann meine Lieblingsmahlzeiten, ob diese Mahlzeit-ID Teil davon ist, was bedeuten würde, dass diese Mahlzeit Teil unserer Favoriten ist.
Damit haben wir diese aktuelle Mahlzeit als Lieblingsinformation, jetzt müssen wir sie an die Navigationsoptionen weitergeben
und wieder können wir dies mit Verwendungseffekt tun, vielleicht dort unten. Stellen Sie hier wie zuvor eine Funktion in einer
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
der is fav-Parameter. Der Name liegt bei Ihnen, was gilt Die aktuelle Mahlzeit ist der Lieblingswert, also ist
der Wert, den wir gerade abgeleitet haben, und jetzt eine Abhängigkeit von dieser Funktion, von diesem
Gebrauchseffektaufruf, den ich meine, natürlich die aktuelle Mahlzeit ist der Favorit. Wenn sich dies ändert, möchte
ich die neuen Informationen an die Parameter weiterleiten und daher zum Header, sonst sollte dieser Effekt nicht erneut ausgeführt werden.
Zurück in den Navigationsoptionen können wir diese Informationen hier abrufen. Der Favorit kann
aus navigationData abgerufen werden. Navigation mit Hilfe von get param und dort nenne ich
das ist fav, hier ist es, also ist das der Name, unter
dem wir es abrufen können.
Jetzt haben wir die Lieblingsinformationen in der Kopfzeile und können diese jetzt verwenden, um hier ein anderes Symbol
zu rendern.
Anstatt immer einen iOS-Stern zu rendern, werde ich hier einen dynamischen Ausdruck haben und prüfen, ob der
Favorit wahr ist. Wenn
dies der Fall ist, möchte ich den iOS-Stern verwenden, bei dem es
sich
um diesen Feldstern handelt. Ich werde iOS-Sternkonturen rendern und das wird
ein leerer Stern sein.
Damit haben wir hoffentlich ein Setup, das wie erwartet funktioniert.
Wenn ich zu den Spaghetti
gehe, ist dies jetzt ein leerer Stern, und wenn ich
darauf klicke, ist es ein gefüllter Stern und gehört zu den Favoriten.
Wenn ich dann hier zum Detailbildschirm gehe, dauert es ein bisschen, bis der Stern
auch hier ausgefüllt ist. Wir müssen das beheben. Wenn ich jetzt hier klicke und wir zu den Mahlzeiten zurückkehren, dort wird
es auch aktualisiert und das ist die Magie von Redux. Es aktualisiert einen Teil der Anwendung, wenn sich etwas in einem anderen Teil
ändert. Genau so sollte es sich hier verhalten. Das funktioniert also im Allgemeinen.
Das einzige, was nicht allzu schön war, ist, dass dieser Stern hier anfangs leer ist und erst nach
dem Laden ausgefüllt wird. Wir können das
beheben, aber ansonsten funktioniert dies so, wie es sollte. Um diesen anfänglich leeren Stern zu reparieren, können wir
wieder eine
Problemumgehung verwenden, die ich zuvor für diese anfänglichen Headerdaten erklärt habe.
Wir möchten nicht warten, bis das erste
Rendern abgeschlossen ist, sondern diese anfänglichen Daten an diese Komponente übergeben, wenn wir zu ihr navigieren.
Daher ist es Zeit für die Essensliste, wo wir diese Navigationsaktion haben, um
auch diesen Favoritenschlüssel weiterzuleiten. Dieser Schlüssel, den ich hier im Bildschirm mit den Essensdetails dort unten
zu extrahieren versucht habe, ist param. Ich möchte den aktuellen Wert übergeben, wenn wir diese Komponente
laden, wenn wir diesen Bildschirm hier aus der Essensliste laden. Dies ist die Komponente, die
diese Navigation zu
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
ist oder nicht,
aber natürlich können wir herausfinden, ob dies der Fall ist oder nicht. In der Essensliste
können wir auch auf den Redux-Store zugreifen, nicht nur über die Bildschirmkomponenten.
Hier kann ich also auch den Use Selector von React Redux wie diesen verwenden und dann in meiner Komponente hier meine Lieblingsgerichte mit Hilfe
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
wir nun einen einzelnen Mahlzeitartikel
rendern, können wir damit herausfinden, ob dieser Mahlzeitartikel zu unseren Favoriten
gehört. Übrigens können
Sie dort keinen Verwendungsselektor verwenden, was
keine gültige Verwendung wäre, da Sie React-Hooks nur auf der Stammebene Ihrer Komponentenfunktion verwenden dürfen,
nicht in verschachtelten Funktionen oder verschachtelt, wenn Blöcke oder ähnliches.
Daher ist die Verwendung des Verwendungswählers
hier nicht zulässig, aber wir können dort natürlich unsere Lieblingsgerichte verwenden. Daher können wir hier
herausfinden, ob dies ein Favorit ist, indem wir einfach die Lieblingsgerichte überprüfen und nach der Mahlzeit suchen, deren ID mit den itemData übereinstimmt
.
Artikel.
id, also die ID der Mahlzeit, die wir gerade rendern. Daher enthält der Favorit den Artikel, den wir dort
gefunden haben. Alternativ verwenden wir hier einen, der eine integrierte Javascript-Methode ist, die true zurückgibt, wenn ein Artikel
in den Lieblingsgerichten dieser Bedingung entspricht.
Wenn also der Favorit wahr ist, wissen wir, dass dieser Artikel ein Favorit ist, und können daher den
Favoriten als Wert für den Favoriten verwenden, den wir als Anfangsparameter an den Detailbildschirm der
Mahlzeit übergeben. Jetzt sollte dieser flackernde Stern, der anfangs leer ist, sein Weg.
Wenn ich dies hier als Favorit markiere und dies verlasse und zurückkomme, wird es von
Anfang an
ausgefüllt, natürlich auch auf dem Lieblingsbildschirm. So können wir also mit Favoriten arbeiten. Stellen
wir jetzt sicher, dass hier auf
dem Favoritenbildschirm Dummy-Text angezeigt wird, falls wir keine Daten haben, die anderweitig angezeigt werden
sollen. Danach kümmern wir uns
um unsere Filter.