1 00:00:02,370 --> 00:00:08,100 Mit den hier gerenderten Filtern wäre es natürlich schön, hier oben eine Schaltfläche zum Speichern zu haben, mit der 2 00:00:08,100 --> 00:00:11,840 wir alle Änderungen an den von uns vorgenommenen Filtern speichern können. 3 00:00:11,940 --> 00:00:16,530 Im Filterbildschirm haben wir also bereits eine Header-Schaltfläche auf headerLeft. Ich möchte jetzt auch 4 00:00:16,530 --> 00:00:23,430 eine auf headerRight haben, also rechts von meinem Header. HeaderRight hier ist also im Grunde das gleiche wie hier, 5 00:00:23,430 --> 00:00:28,050 also können wir dies hier einfach kopieren, weil wir dort Header-Schaltflächen mit einer Schaltfläche 6 00:00:28,050 --> 00:00:35,280 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 7 00:00:35,280 --> 00:00:41,250 Sie eine andere auswählen, aber hier werde ich zum Beispiel speichern gehen und jetzt, wenn dies gedrückt wird, 8 00:00:41,400 --> 00:00:44,940 wird das ein bisschen schwierig. Natürlich können wir hier 9 00:00:44,940 --> 00:00:48,710 eine Funktion auslösen und Protokolle zum Speichern von Protokollen konsolidieren. 10 00:00:48,900 --> 00:00:54,000 Die eigentliche Logik zum Speichern und Anwenden von Filtern ist etwas, um das wir uns im nächsten 11 00:00:54,120 --> 00:00:57,150 Modul kümmern werden, aber dennoch gibt es ein Problem damit. 12 00:00:57,720 --> 00:01:01,530 Wenn ich es so speichere und wir zu den Filtern gehen, 13 00:01:01,530 --> 00:01:12,150 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 14 00:01:12,150 --> 00:01:19,170 erhalten Im Moment melden Sie dies in der Konsole an. Wenden Sie dies im nächsten Modul irgendwie an, um die 15 00:01:19,320 --> 00:01:26,740 Rezepte zu filtern, die wir auf den anderen Bildschirmen anzeigen. Das mag trivial klingen, aber wir haben hier ein Problem, 16 00:01:26,740 --> 00:01:28,910 unsere Filter, also die 17 00:01:29,110 --> 00:01:36,360 Informationen, welche Filter gesetzt sind, die alle hier in diesen Zustandsvariablen gespeichert sind, richtig und das ist Teil unserer Komponente, 18 00:01:36,370 --> 00:01:38,560 unsere Schaltfläche befindet sich jedoch in 19 00:01:38,770 --> 00:01:41,530 der Navigation Optionen und ja, dort erhalten 20 00:01:41,530 --> 00:01:47,440 wir die Snap-Daten, die uns am Ende zum Beispiel die Navigations-Requisite geben, aber was wir hier 21 00:01:47,450 --> 00:01:52,990 nicht haben, ist der Zugriff auf den Status unserer Komponente, und das ist es, was 22 00:01:52,990 --> 00:01:57,970 ich hier und jetzt hier brauche wirklich ein wichtiges Muster, das wie ein 23 00:01:58,540 --> 00:02:08,020 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 24 00:02:08,020 --> 00:02:13,150 Ihrer Komponente innerhalb Ihrer Navigationsoptionen zu ändern. In den Navigationsoptionen benötigen 25 00:02:13,150 --> 00:02:18,830 Sie Informationen zu Daten, die sich in Ihrer Komponente geändert haben. 26 00:02:18,840 --> 00:02:24,980 Dies ist übrigens auch ein Ansatz, den Sie in den offiziellen Dokumenten der Navigation finden. Wir können Parameter verwenden, damit wir 27 00:02:25,190 --> 00:02:30,940 zwischen den Bildschirmen wechseln, um zwischen unserer Komponente und den Navigationsoptionen zu kommunizieren. Dies 28 00:02:31,010 --> 00:02:35,070 mag seltsam klingen, aber genau das werden wir jetzt tun. 29 00:02:36,360 --> 00:02:44,170 Nehmen wir an, wir fügen hier in unserer Komponente eine neue Funktion hinzu, und ich werde diese Funktion hier benennen. Filter speichern. 30 00:02:44,460 --> 00:02:46,950 Sie können sie nach Belieben benennen. 31 00:02:47,000 --> 00:02:49,970 Es ist eine Funktion, die keine Argumente akzeptiert, aber 32 00:02:51,110 --> 00:02:57,410 einen Job hat. Sie erstellt beispielsweise eine angewendete Filterkonstante, bei der es sich um ein Objekt handelt, das unsere Filter sammelt. 33 00:02:57,410 --> 00:03:02,300 Dort könnten wir also glutenfrei als Schlüssel haben und isGlutenFree als 34 00:03:02,300 --> 00:03:07,250 Wert speichern, wir haben lactoseFree als Schlüssel und wir speichern unseren 35 00:03:07,250 --> 00:03:08,480 aktuellen isLactoseFree-Statuswert. 36 00:03:08,690 --> 00:03:17,540 Wir machen dasselbe für Veganer mit isVegan und wir machen dasselbe für isVegetarian und isVegetarian, und danach 37 00:03:17,540 --> 00:03:23,930 werde ich diese Sache mit den angewendeten Filtern auf der Konsole protokollieren. 38 00:03:24,070 --> 00:03:32,770 Nun möchte ich meinen Navigationsoptionen Zugriff auf diese Funktion gewähren, die Teil meiner Komponente ist, damit ich diese 39 00:03:32,770 --> 00:03:38,080 Funktion aus den Navigationsoptionen heraus auslösen kann und dafür Parameter verwenden 40 00:03:38,200 --> 00:03:38,890 können. 41 00:03:42,490 --> 00:03:49,300 Fügen wir den Verwendungseffekt hinzu, damit wir Code ausführen können, wenn sich unser 42 00:03:49,300 --> 00:03:58,810 Status ändert, da ich dann diese aktualisierte Funktion weiterleiten möchte, die im Grunde meinen aktuellen Status an meine Navigationsoptionen 43 00:03:58,810 --> 00:03:59,830 erfasst. 44 00:03:59,830 --> 00:04:06,280 Hier kann ich also den Use-Effekt hinzufügen, und der Use-Effekt übernimmt eine Funktion, die 45 00:04:06,280 --> 00:04:16,460 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. 46 00:04:16,460 --> 00:04:18,130 Wir haben vorher keine Set-Parameter 47 00:04:18,130 --> 00:04:20,400 verwendet, wir haben nur mit get param gearbeitet. 48 00:04:20,510 --> 00:04:27,170 Wir haben keine festgelegten Parameter verwendet, da wir, bevor wir nur Parameter festgelegt haben, als wir zu einem neuen Bildschirm navigiert 49 00:04:27,170 --> 00:04:33,530 haben, beispielsweise wie im Kategorienbildschirm, unsere Parameter wie folgt an den neuen Bildschirm übergeben haben, aber wir können festgelegte Parameter 50 00:04:33,560 --> 00:04:42,160 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. 51 00:04:42,160 --> 00:04:44,600 Daher können wir hier Parameter für 52 00:04:45,690 --> 00:04:51,120 ein brandneues Objekt festlegen. Ich möchte dort einen Eintrag hinzufügen, aber Sie können so viele 53 00:04:51,120 --> 00:04:52,810 hinzufügen, wie Sie möchten. 54 00:04:53,780 --> 00:05:04,040 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, 55 00:05:04,060 --> 00:05:08,520 also auf diese Funktion. Ich führe die Funktion nicht aus, ich 56 00:05:08,580 --> 00:05:10,050 füge keine Klammern 57 00:05:10,080 --> 00:05:16,740 hinzu, ich zeige nur darauf, ich verwende nur diese Variable, die am Ende einen Zeiger auf diese Funktion enthält, und 58 00:05:16,740 --> 00:05:23,250 leite diesen Wert weiter, also leite diesen Zeiger weiter oder speichere diesen Zeiger an Diese Funktion in dieser Sicherungstaste, 59 00:05:23,250 --> 00:05:28,230 in dem Objekt, das ich jetzt in diesem Bildschirm als Parameter festgelegt habe, im Filterbildschirm. 60 00:05:28,430 --> 00:05:34,280 Dies ermöglicht es uns, zu den Navigationsoptionen zu gelangen, und dort haben wir Zugriff auf 61 00:05:34,340 --> 00:05:43,310 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 62 00:05:43,310 --> 00:05:46,790 verwenden können. Navigation. getParam, auf 63 00:05:46,790 --> 00:05:53,060 diese Weise können wir einen Parameter abrufen, der auch hier in den Navigationsoptionen verfügbar ist. Speichern 64 00:05:53,060 --> 00:06:03,270 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 65 00:06:03,280 --> 00:06:08,120 ist es sieht aus wie ein wirklich schmutziger Hack, ist es aber nicht. 66 00:06:08,200 --> 00:06:14,230 Dies ist eine gültige Art der Kommunikation zwischen Ihrer Komponente und Ihren Navigationsoptionen, die 67 00:06:14,230 --> 00:06:18,300 Sie normalerweise benötigen, wenn Ihre Navigationsoptionen Aktionselemente enthalten. 68 00:06:18,310 --> 00:06:26,880 Dadurch erhalten wir Zugriff auf unsere Parameter und dort greifen wir auf den Parameter save zu. Der Parameter save ist diese Funktion. Wir aktualisieren 69 00:06:27,600 --> 00:06:33,180 den Wert in diesem Parameter, wenn sich unser Status ändert, und wir müssen dies tun, da 70 00:06:33,180 --> 00:06:38,880 dies in dieser Funktion immer dann neu erstellt wird Unser Status ändert sich und es werden 71 00:06:38,880 --> 00:06:40,530 die neuesten Statuswerte protokolliert. 72 00:06:40,620 --> 00:06:45,420 Das ist natürlich das, was wir wollen, wenn diese Funktion schließlich mithilfe von 73 00:06:45,750 --> 00:06:49,110 Parametern über diese Schaltfläche in den Navigationsoptionen ausgeführt wird. 74 00:06:49,110 --> 00:06:54,300 Daher verwenden wir Parameter als Kommunikationsmittel zwischen unserer Komponente und den Navigationsoptionen, eine 75 00:06:54,300 --> 00:06:59,730 Art Problemumgehung, aber auch die, die Sie in den offiziellen Dokumenten finden, und 76 00:06:59,730 --> 00:07:07,390 die Art und Weise, wie Sie hier kommunizieren. Bevor wir dies speichern, müssen wir jedoch zwei Dinge tun: Verwenden 77 00:07:07,390 --> 00:07:14,320 Sie den Effekt sofort, wenn diese Komponente aktualisiert wird. Am Ende sollte es nur ausgeführt werden, wenn Speicherfilter einen neuen Wert enthalten. 78 00:07:14,440 --> 00:07:20,740 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 79 00:07:20,980 --> 00:07:23,530 dort Filter speichern. Diese Variable hier, die eine 80 00:07:23,530 --> 00:07:26,470 Funktion enthält, ist also eine Abhängigkeit. Im Moment wird diese Variable 81 00:07:26,470 --> 00:07:30,900 immer neu erstellt, wenn Sie eine Komponente neu erstellen, also nicht wirklich eine Abhängigkeit, die uns hilft, 82 00:07:31,090 --> 00:07:37,600 aber wir werden dies bald beheben und Requisiten sind auch eine Abhängigkeit. Um unnötiges erneutes Rendern zu vermeiden, wenn 83 00:07:37,600 --> 00:07:39,140 sich etwas in 84 00:07:39,370 --> 00:07:48,330 der Parameterkomponente ändert, verwende ich eine andere Methode zum Extrahieren meiner Navigations-Requisiten. Hier verwende ich die Destrukturierung. Navigation entspricht 85 00:07:48,870 --> 00:07:49,770 Requisiten. 86 00:07:49,770 --> 00:07:56,350 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 87 00:07:56,350 --> 00:08:02,460 brandneuen Konstante mit demselben Namen gespeichert, also mit derselben Navigation. Es speichert jetzt den Wert in der 88 00:08:02,460 --> 00:08:05,560 Navigations-Requisite in dieser Navigationskonstante, genau das macht die 89 00:08:05,560 --> 00:08:11,940 Syntax und die Vorteile, dass wir jetzt hier eine Navigationskonstante haben, die wir ohne Requisiten im Gebrauchseffekt verwenden 90 00:08:11,940 --> 00:08:17,780 können, da wir diese jetzt und in einer separaten Konstante gespeichert haben Jetzt können wir dies 91 00:08:17,820 --> 00:08:21,860 als Abhängigkeit hinzufügen. Wenn sich dies ändert, wird dies neu erstellt. 92 00:08:21,990 --> 00:08:27,500 Wenn sich jedoch etwas anderes in den Requisiten ändert, wird der Effekt nicht unnötig wiederholt. 93 00:08:27,750 --> 00:08:34,350 Um sicherzustellen, dass die Speicherfilter nur aktualisiert werden, wenn sich unser Status ändert, können wir den Use-Callback-Hook aus React 94 00:08:34,350 --> 00:08:38,000 importieren, einem weiteren in React integrierten Hook. Auf diese Weise 95 00:08:38,080 --> 00:08:43,560 können wir eine Funktion so umbrechen, dass diese Funktion tatsächlich von React zwischengespeichert und nur neu 96 00:08:43,560 --> 00:08:46,710 erstellt wird wenn sich seine Abhängigkeiten geändert haben. 97 00:08:46,710 --> 00:08:53,610 Wir wickeln dies wie folgt um unsere Funktionen zum Speichern von Filtern. Daher übergeben wir diese Funktion als Argument für 98 00:08:53,610 --> 00:08:56,010 die Verwendung von Rückruf und verwenden Rückruf. 99 00:08:56,010 --> 00:09:01,710 Außerdem wird ein zweites Argument verwendet, das ein Array von Abhängigkeiten ist. Dort müssen wir alle 100 00:09:01,710 --> 00:09:03,300 Abhängigkeiten angeben, die wir 101 00:09:03,300 --> 00:09:09,930 haben hier könnte sich das ändern und das würde uns dazu bringen, diese Funktion neu zu erstellen, und das ist 102 00:09:09,930 --> 00:09:18,410 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. 103 00:09:18,420 --> 00:09:23,610 Dies bedeutet, dass diese Komponentenfunktion hier neu erstellt wird, wenn sich einer dieser Zustände 104 00:09:23,730 --> 00:09:26,160 hier ändert. Wenn irgendetwas anderes dazu 105 00:09:26,310 --> 00:09:32,210 führt, dass diese Komponente erneut gerendert wird, wird dies nicht neu erstellt Funktion und das ist 106 00:09:32,310 --> 00:09:37,410 wiederum wichtig, da diese Funktion zum Speichern von Filtern eine Abhängigkeit des Nutzungseffekts ist. 107 00:09:37,530 --> 00:09:43,620 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 108 00:09:43,620 --> 00:09:48,340 und unsere Parameter nicht ständig aktualisieren, sondern dies nur dann tun, wenn wir dies tun müssen. 109 00:09:49,950 --> 00:09:56,790 Wenn dies geschehen ist, sollten wir nun in der Lage sein, auf die Schaltfläche Speichern zu klicken und die von uns 110 00:09:56,850 --> 00:09:59,250 ausgewählten Filter anzuzeigen. Gehen wir also hier 111 00:10:01,970 --> 00:10:03,770 und jetzt zu den Filtern. 112 00:10:03,770 --> 00:10:06,000 Hast du eine Idee, warum es kaputt gehen würde? 113 00:10:06,980 --> 00:10:14,380 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 114 00:10:14,380 --> 00:10:21,090 Requisiten in ihrer Gesamtheit haben möchte und so weiter. Ein Problem ist nur, wenn wir set params aufrufen, 115 00:10:21,100 --> 00:10:27,970 fügen wir unserem Navigator am Ende neue Parameter hinzu, und dies bewirkt auch, dass sich die Navigation 116 00:10:27,970 --> 00:10:28,770 ändert. 117 00:10:28,900 --> 00:10:31,150 Am Ende habe ich hier also eine Endlosschleife. 118 00:10:31,300 --> 00:10:36,810 Wenn ich die Navigation hier als Abhängigkeit entferne, funktioniert dies. Wenn wir dies jetzt speichern, wenn Sie 119 00:10:36,820 --> 00:10:42,550 jetzt beide Apps hier mit Hilfe der Task-Manager schließen und diese dann auf beiden Betriebssystemen neu 120 00:10:43,120 --> 00:10:50,230 starten, werden Sie sehen, dass dies jetzt tatsächlich funktioniert und Sie hier auf Speichern klicken können, jetzt was Sie möchten. Ich 121 00:10:50,230 --> 00:10:53,220 werde nicht sehen, ist die Ausgabe im Protokoll hier. 122 00:10:53,230 --> 00:10:58,960 Das ist jedoch sehr sinnvoll, denn wenn Sie sich diese Schaltfläche zum Speichern in 123 00:10:59,780 --> 00:11:06,310 unserer Kopfzeile genauer ansehen, mache ich hier in onPress am Ende diese Funktion, aber was macht das? 124 00:11:06,370 --> 00:11:11,350 Es ruft unsere Parameter ab, die im oder im Speicherschlüssel gespeichert sind, und 125 00:11:11,350 --> 00:11:12,570 was ist das? 126 00:11:12,580 --> 00:11:17,770 Nun, das ist, wie bereits erwähnt, ein Zeiger auf die Funktion zum Speichern von Filtern, also rufen wir diesen Zeiger ab. 127 00:11:18,250 --> 00:11:22,630 Wenn wir dann nichts mit diesem Zeiger machen, machen wir nichts. 128 00:11:22,630 --> 00:11:27,940 Das ist ein Zeiger auf eine Funktion, also müssen wir sie natürlich so ausführen, indem wir Klammern hinzufügen. 129 00:11:27,940 --> 00:11:34,120 Alternativ werden wir diese anonyme Pfeilfunktion hier einfach los und binden onPress einfach an das Ergebnis 130 00:11:34,120 --> 00:11:40,420 des Abrufens unseres Zeigers hier, da dann dieser Zeiger auf die Funktion für uns ausgeführt wird, wenn 131 00:11:40,420 --> 00:11:42,270 wir diese drücken, das ist 132 00:11:42,280 --> 00:11:43,210 die Alternative. 133 00:11:43,960 --> 00:11:48,370 Wenn wir dies jetzt speichern und daher das Neuladen zulassen und zu den Filtern 134 00:11:48,370 --> 00:11:55,200 zurückkehren. Wenn ich hier auf Speichern klicke, wird jetzt eine Ausgabe im Protokoll angezeigt. Lassen Sie uns hier ein wenig nach oben scrollen. 135 00:11:55,300 --> 00:11:56,940 Alles ist auf false gesetzt. 136 00:11:57,040 --> 00:12:02,800 Wenn ich jetzt lactoseFree und vegetarian auf true setze und auf save drücke, sehen wir ein weiteres 137 00:12:03,070 --> 00:12:09,080 Protokoll und dort wird tatsächlich vegetarian und lactoseFree auf true gesetzt, was genau das ist, was ich hier habe. 138 00:12:09,100 --> 00:12:14,420 Nun, da dies funktioniert, bestätigen wir, dass es auch unter Android funktioniert, indem wir dort auch zu Filtern 139 00:12:14,440 --> 00:12:18,480 gehen. Setzen wir lactoseFree auf true und speichern dies. Wenn wir dies tun, 140 00:12:18,520 --> 00:12:20,080 ist dies unsere Android-Ausgabe 141 00:12:20,110 --> 00:12:22,290 hier. LactoseFree ist true, alles andere ist 142 00:12:22,330 --> 00:12:24,550 falsch , so funktioniert das jetzt auch. 143 00:12:24,550 --> 00:12:29,830 Daher kann es etwas schwierig sein, diese Problemumgehung in den Griff zu bekommen, und 144 00:12:30,020 --> 00:12:31,270 es ist auch 145 00:12:31,330 --> 00:12:38,230 wichtig, diese Endlosschleife hier zu vermeiden. Stellen Sie sicher, dass Sie hier einen Rückruf verwenden, um unnötige Neuerstellungen 146 00:12:38,230 --> 00:12:43,850 dieser Funktion zu vermeiden Aktualisieren Sie die Parameter und daher wird diese Komponente neu erstellt. 147 00:12:43,850 --> 00:12:48,950 Sie erstellen diese Funktion nicht neu und geben daher auch eine Endlosschleife ein. 148 00:12:48,950 --> 00:12:54,380 Damit haben wir jedoch eine Möglichkeit, zwischen Komponenten- und Navigationsoptionen zu kommunizieren. Dies ist normalerweise ein 149 00:12:54,380 --> 00:13:00,470 Muster, das Sie benötigen, wenn Sie Aktionselemente in Ihrer Aktionsleiste haben und mithilfe dieser Optionen etwas auslösen 150 00:13:00,470 --> 00:13:04,720 möchten, das von den in Ihrer Komponente verwalteten Daten abhängt Tasten.