Mit den hier gerenderten Filtern wäre es natürlich schön, hier oben eine Schaltfläche zum Speichern zu haben, mit der
wir alle Änderungen an den von uns vorgenommenen Filtern speichern können.
Im Filterbildschirm haben wir also bereits eine Header-Schaltfläche auf headerLeft. Ich möchte jetzt auch
eine auf headerRight haben, also rechts von meinem Header. HeaderRight hier ist also im Grunde das gleiche wie hier,
also können wir dies hier einfach kopieren, weil wir dort Header-Schaltflächen mit einer Schaltfläche
haben möchten. Dies ist die Schaltfläche zum Speichern und das Symbol, das wir dort verwenden können, ist beispielsweise und von Natürlich können
Sie eine andere auswählen, aber hier werde ich zum Beispiel speichern gehen und jetzt, wenn dies gedrückt wird,
wird das ein bisschen schwierig. Natürlich können wir hier
eine Funktion auslösen und Protokolle zum Speichern von Protokollen konsolidieren.
Die eigentliche Logik zum Speichern und Anwenden von Filtern ist etwas, um das wir uns im nächsten
Modul kümmern werden, aber dennoch gibt es ein Problem damit.
Wenn ich es so speichere und wir zu den Filtern gehen,
können wir dies natürlich drücken, das funktioniert, aber was schön wäre, wenn wir dann wirklich unseren aktuellen Filterstatus erfassen, also im Grunde genommen hier und einen Schnappschuss unseres aktuellen Status
erhalten Im Moment melden Sie dies in der Konsole an. Wenden Sie dies im nächsten Modul irgendwie an, um die
Rezepte zu filtern, die wir auf den anderen Bildschirmen anzeigen. Das mag trivial klingen, aber wir haben hier ein Problem,
unsere Filter, also die
Informationen, welche Filter gesetzt sind, die alle hier in diesen Zustandsvariablen gespeichert sind, richtig und das ist Teil unserer Komponente,
unsere Schaltfläche befindet sich jedoch in
der Navigation Optionen und ja, dort erhalten
wir die Snap-Daten, die uns am Ende zum Beispiel die Navigations-Requisite geben, aber was wir hier
nicht haben, ist der Zugriff auf den Status unserer Komponente, und das ist es, was
ich hier und jetzt hier brauche wirklich ein wichtiges Muster, das wie ein
seltsamer Hack oder eine Problemumgehung aussehen könnte, aber auf diese Weise tatsächlich zwischen Ihren Navigationsoptionen und Ihrer Komponente kommuniziert, wenn Sie darauf angewiesen sind, Daten in
Ihrer Komponente innerhalb Ihrer Navigationsoptionen zu ändern. In den Navigationsoptionen benötigen
Sie Informationen zu Daten, die sich in Ihrer Komponente geändert haben.
Dies ist übrigens auch ein Ansatz, den Sie in den offiziellen Dokumenten der Navigation finden. Wir können Parameter verwenden, damit wir
zwischen den Bildschirmen wechseln, um zwischen unserer Komponente und den Navigationsoptionen zu kommunizieren. Dies
mag seltsam klingen, aber genau das werden wir jetzt tun.
Nehmen wir an, wir fügen hier in unserer Komponente eine neue Funktion hinzu, und ich werde diese Funktion hier benennen. Filter speichern.
Sie können sie nach Belieben benennen.
Es ist eine Funktion, die keine Argumente akzeptiert, aber
einen Job hat. Sie erstellt beispielsweise eine angewendete Filterkonstante, bei der es sich um ein Objekt handelt, das unsere Filter sammelt.
Dort könnten wir also glutenfrei als Schlüssel haben und isGlutenFree als
Wert speichern, wir haben lactoseFree als Schlüssel und wir speichern unseren
aktuellen isLactoseFree-Statuswert.
Wir machen dasselbe für Veganer mit isVegan und wir machen dasselbe für isVegetarian und isVegetarian, und danach
werde ich diese Sache mit den angewendeten Filtern auf der Konsole protokollieren.
Nun möchte ich meinen Navigationsoptionen Zugriff auf diese Funktion gewähren, die Teil meiner Komponente ist, damit ich diese
Funktion aus den Navigationsoptionen heraus auslösen kann und dafür Parameter verwenden
können.
Fügen wir den Verwendungseffekt hinzu, damit wir Code ausführen können, wenn sich unser
Status ändert, da ich dann diese aktualisierte Funktion weiterleiten möchte, die im Grunde meinen aktuellen Status an meine Navigationsoptionen
erfasst.
Hier kann ich also den Use-Effekt hinzufügen, und der Use-Effekt übernimmt eine Funktion, die
ausgeführt wird, wenn sich unser Status ändert und die Komponente neu gerendert wird. Dort können wir jetzt die Parameter für das Requisitennavigationsset verwenden.
Wir haben vorher keine Set-Parameter
verwendet, wir haben nur mit get param gearbeitet.
Wir haben keine festgelegten Parameter verwendet, da wir, bevor wir nur Parameter festgelegt haben, als wir zu einem neuen Bildschirm navigiert
haben, beispielsweise wie im Kategorienbildschirm, unsere Parameter wie folgt an den neuen Bildschirm übergeben haben, aber wir können festgelegte Parameter
verwenden, um die Parameter zu aktualisieren Werte für den aktuell geladenen Bildschirm. Hier auf diesem Bildschirm haben wir keine Parameter, daher ist er leer.
Daher können wir hier Parameter für
ein brandneues Objekt festlegen. Ich möchte dort einen Eintrag hinzufügen, aber Sie können so viele
hinzufügen, wie Sie möchten.
Ich möchte einen Speicherschlüssel hinzufügen, und Sie können einen beliebigen Namen für den gewünschten Schlüssel verwenden und auf Speicherfilter verweisen,
also auf diese Funktion. Ich führe die Funktion nicht aus, ich
füge keine Klammern
hinzu, ich zeige nur darauf, ich verwende nur diese Variable, die am Ende einen Zeiger auf diese Funktion enthält, und
leite diesen Wert weiter, also leite diesen Zeiger weiter oder speichere diesen Zeiger an Diese Funktion in dieser Sicherungstaste,
in dem Objekt, das ich jetzt in diesem Bildschirm als Parameter festgelegt habe, im Filterbildschirm.
Dies ermöglicht es uns, zu den Navigationsoptionen zu gelangen, und dort haben wir Zugriff auf
Navigationsdaten und damit auf die Navigation nach rechts. Dies bedeutet, dass wir hier für die Schaltfläche Speichern, wenn Sie diese drücken, tatsächlich navData
verwenden können. Navigation. getParam, auf
diese Weise können wir einen Parameter abrufen, der auch hier in den Navigationsoptionen verfügbar ist. Speichern
Sie und ich kann den Speicherparameter abrufen, den ich hier als Verwendungseffekt einstelle, und ich weiß, dass dies beim ersten Mal und beim ersten Mal sehr seltsam
ist es sieht aus wie ein wirklich schmutziger Hack, ist es aber nicht.
Dies ist eine gültige Art der Kommunikation zwischen Ihrer Komponente und Ihren Navigationsoptionen, die
Sie normalerweise benötigen, wenn Ihre Navigationsoptionen Aktionselemente enthalten.
Dadurch erhalten wir Zugriff auf unsere Parameter und dort greifen wir auf den Parameter save zu. Der Parameter save ist diese Funktion. Wir aktualisieren
den Wert in diesem Parameter, wenn sich unser Status ändert, und wir müssen dies tun, da
dies in dieser Funktion immer dann neu erstellt wird Unser Status ändert sich und es werden
die neuesten Statuswerte protokolliert.
Das ist natürlich das, was wir wollen, wenn diese Funktion schließlich mithilfe von
Parametern über diese Schaltfläche in den Navigationsoptionen ausgeführt wird.
Daher verwenden wir Parameter als Kommunikationsmittel zwischen unserer Komponente und den Navigationsoptionen, eine
Art Problemumgehung, aber auch die, die Sie in den offiziellen Dokumenten finden, und
die Art und Weise, wie Sie hier kommunizieren. Bevor wir dies speichern, müssen wir jedoch zwei Dinge tun: Verwenden
Sie den Effekt sofort, wenn diese Komponente aktualisiert wird. Am Ende sollte es nur ausgeführt werden, wenn Speicherfilter einen neuen Wert enthalten.
Also werde ich das zweite Argument hinzufügen, um den Effekt zu verwenden, bei dem es sich um dieses Array von Abhängigkeiten handelt, und
dort Filter speichern. Diese Variable hier, die eine
Funktion enthält, ist also eine Abhängigkeit. Im Moment wird diese Variable
immer neu erstellt, wenn Sie eine Komponente neu erstellen, also nicht wirklich eine Abhängigkeit, die uns hilft,
aber wir werden dies bald beheben und Requisiten sind auch eine Abhängigkeit. Um unnötiges erneutes Rendern zu vermeiden, wenn
sich etwas in
der Parameterkomponente ändert, verwende ich eine andere Methode zum Extrahieren meiner Navigations-Requisiten. Hier verwende ich die Destrukturierung. Navigation entspricht
Requisiten.
Dies ist eine Syntax, die die Objektzerstörung verwendet, was bedeutet, dass Requisiten ein Objekt sind. Dadurch wird der Navigationsschlüssel herausgezogen und in einer
brandneuen Konstante mit demselben Namen gespeichert, also mit derselben Navigation. Es speichert jetzt den Wert in der
Navigations-Requisite in dieser Navigationskonstante, genau das macht die
Syntax und die Vorteile, dass wir jetzt hier eine Navigationskonstante haben, die wir ohne Requisiten im Gebrauchseffekt verwenden
können, da wir diese jetzt und in einer separaten Konstante gespeichert haben Jetzt können wir dies
als Abhängigkeit hinzufügen. Wenn sich dies ändert, wird dies neu erstellt.
Wenn sich jedoch etwas anderes in den Requisiten ändert, wird der Effekt nicht unnötig wiederholt.
Um sicherzustellen, dass die Speicherfilter nur aktualisiert werden, wenn sich unser Status ändert, können wir den Use-Callback-Hook aus React
importieren, einem weiteren in React integrierten Hook. Auf diese Weise
können wir eine Funktion so umbrechen, dass diese Funktion tatsächlich von React zwischengespeichert und nur neu
erstellt wird wenn sich seine Abhängigkeiten geändert haben.
Wir wickeln dies wie folgt um unsere Funktionen zum Speichern von Filtern. Daher übergeben wir diese Funktion als Argument für
die Verwendung von Rückruf und verwenden Rückruf.
Außerdem wird ein zweites Argument verwendet, das ein Array von Abhängigkeiten ist. Dort müssen wir alle
Abhängigkeiten angeben, die wir
haben hier könnte sich das ändern und das würde uns dazu bringen, diese Funktion neu zu erstellen, und das ist
im Wesentlichen der Fall, wenn sich einer der vier Zustände hier ändert. IsGlutenFree, isLactoseFree, isVegan und isVegetarian sind nun alle Abhängigkeiten des Rückrufs.
Dies bedeutet, dass diese Komponentenfunktion hier neu erstellt wird, wenn sich einer dieser Zustände
hier ändert. Wenn irgendetwas anderes dazu
führt, dass diese Komponente erneut gerendert wird, wird dies nicht neu erstellt Funktion und das ist
wiederum wichtig, da diese Funktion zum Speichern von Filtern eine Abhängigkeit des Nutzungseffekts ist.
Wenn dies neu erstellt wird, wird der Effekt erneut ausgeführt, wodurch unsere Parameter aktualisiert werden. Wir möchten dies auf ein Minimum beschränken
und unsere Parameter nicht ständig aktualisieren, sondern dies nur dann tun, wenn wir dies tun müssen.
Wenn dies geschehen ist, sollten wir nun in der Lage sein, auf die Schaltfläche Speichern zu klicken und die von uns
ausgewählten Filter anzuzeigen. Gehen wir also hier
und jetzt zu den Filtern.
Hast du eine Idee, warum es kaputt gehen würde?
Das Problem ist, ich habe hier eine Navigation als Abhängigkeit vom Nutzungseffekt und ich habe erklärt, warum ich es richtig habe, dass ich keine
Requisiten in ihrer Gesamtheit haben möchte und so weiter. Ein Problem ist nur, wenn wir set params aufrufen,
fügen wir unserem Navigator am Ende neue Parameter hinzu, und dies bewirkt auch, dass sich die Navigation
ändert.
Am Ende habe ich hier also eine Endlosschleife.
Wenn ich die Navigation hier als Abhängigkeit entferne, funktioniert dies. Wenn wir dies jetzt speichern, wenn Sie
jetzt beide Apps hier mit Hilfe der Task-Manager schließen und diese dann auf beiden Betriebssystemen neu
starten, werden Sie sehen, dass dies jetzt tatsächlich funktioniert und Sie hier auf Speichern klicken können, jetzt was Sie möchten. Ich
werde nicht sehen, ist die Ausgabe im Protokoll hier.
Das ist jedoch sehr sinnvoll, denn wenn Sie sich diese Schaltfläche zum Speichern in
unserer Kopfzeile genauer ansehen, mache ich hier in onPress am Ende diese Funktion, aber was macht das?
Es ruft unsere Parameter ab, die im oder im Speicherschlüssel gespeichert sind, und
was ist das?
Nun, das ist, wie bereits erwähnt, ein Zeiger auf die Funktion zum Speichern von Filtern, also rufen wir diesen Zeiger ab.
Wenn wir dann nichts mit diesem Zeiger machen, machen wir nichts.
Das ist ein Zeiger auf eine Funktion, also müssen wir sie natürlich so ausführen, indem wir Klammern hinzufügen.
Alternativ werden wir diese anonyme Pfeilfunktion hier einfach los und binden onPress einfach an das Ergebnis
des Abrufens unseres Zeigers hier, da dann dieser Zeiger auf die Funktion für uns ausgeführt wird, wenn
wir diese drücken, das ist
die Alternative.
Wenn wir dies jetzt speichern und daher das Neuladen zulassen und zu den Filtern
zurückkehren. Wenn ich hier auf Speichern klicke, wird jetzt eine Ausgabe im Protokoll angezeigt. Lassen Sie uns hier ein wenig nach oben scrollen.
Alles ist auf false gesetzt.
Wenn ich jetzt lactoseFree und vegetarian auf true setze und auf save drücke, sehen wir ein weiteres
Protokoll und dort wird tatsächlich vegetarian und lactoseFree auf true gesetzt, was genau das ist, was ich hier habe.
Nun, da dies funktioniert, bestätigen wir, dass es auch unter Android funktioniert, indem wir dort auch zu Filtern
gehen. Setzen wir lactoseFree auf true und speichern dies. Wenn wir dies tun,
ist dies unsere Android-Ausgabe
hier. LactoseFree ist true, alles andere ist
falsch , so funktioniert das jetzt auch.
Daher kann es etwas schwierig sein, diese Problemumgehung in den Griff zu bekommen, und
es ist auch
wichtig, diese Endlosschleife hier zu vermeiden. Stellen Sie sicher, dass Sie hier einen Rückruf verwenden, um unnötige Neuerstellungen
dieser Funktion zu vermeiden Aktualisieren Sie die Parameter und daher wird diese Komponente neu erstellt.
Sie erstellen diese Funktion nicht neu und geben daher auch eine Endlosschleife ein.
Damit haben wir jedoch eine Möglichkeit, zwischen Komponenten- und Navigationsoptionen zu kommunizieren. Dies ist normalerweise ein
Muster, das Sie benötigen, wenn Sie Aktionselemente in Ihrer Aktionsleiste haben und mithilfe dieser Optionen etwas auslösen
möchten, das von den in Ihrer Komponente verwalteten Daten abhängt Tasten.