Teraz z renderowanymi tutaj filtrami, oczywiście byłoby miło mieć tutaj przycisk zapisu, który pozwala
nam zapisać wszelkie zmiany w filtrach, które wprowadziliśmy.
Na ekranie filtrów mamy już jeden przycisk nagłówka w nagłówku Left, teraz chcę też mieć
jeden w nagłówku RightRight, więc po prawej stronie mojego nagłówka. Więc headerRight tutaj jest w zasadzie taki sam,
jak tutaj mamy, więc możemy po prostu skopiować to tutaj, ponieważ chcemy
mieć przyciski nagłówka z jednym przyciskiem, który będzie przyciskiem Zapisz, a ikoną, której możemy użyć, jest na przykład i
oczywiście możesz wybrać inny, ale tutaj pójdę na przykład z zapisem, a teraz, gdy zostanie naciśnięty,
będzie to nieco trudne. Oczywiście możemy uruchomić
funkcję i możemy tutaj konsolidować filtry zapisujące dziennik.
Teraz logika zapisywania i stosowania filtrów jest czymś, o czym zajmiemy się w następnym
module, ale nadal jest z tym pewien problem.
Jeśli zachowam to w ten sposób i przejdziemy do
filtrów, oczywiście możemy to nacisnąć, to działa, ale fajnie byłoby, gdybyśmy wtedy naprawdę zgromadzili nasz obecny stan filtrów, więc w zasadzie uzyskujemy migawkę naszego obecnego
stanu tutaj i na razie zaloguj się do konsoli, w następnym module zastosuj to w jakiś sposób,
aby przefiltrować przepisy, które wyświetlamy na innych ekranach. Może to brzmieć trywialnie, ale będziemy mieli problem,
nasze filtry, więc
informacje, które filtry są ustawione, to wszystko jest przechowywane w tych zmiennych stanu tutaj, prawda i to
jest część naszego komponentu, nasz
przycisk jest jednak w nawigacji opcje
i tak, otrzymujemy dane przyciągania, które na przykład dają nam w końcu rekwizyt
nawigacyjny, ale nie mamy tutaj dostępu do stanu naszego komponentu i tego właśnie
potrzebuję tutaj, a teraz to tutaj naprawdę ważny wzorzec, który może
wyglądać jak dziwny hack lub obejście, ale który jest sposobem na komunikację między opcjami nawigacji a komponentem, jeśli zależysz od zmiany
danych w komponencie w opcjach nawigacji. Dlatego w opcjach nawigacji
potrzebujesz informacji o danych, które zmieniły się w twoim komponencie.
Nawiasem mówiąc, takie podejście można znaleźć w oficjalnych dokumentach nawigacyjnych. Możemy używać parametrów, aby przekazywać
między ekranami komunikację między naszym komponentem a opcjami nawigacji, i może
to zabrzmieć dziwnie, ale właśnie to zrobimy teraz.
Powiedzmy, że tutaj, w naszym komponencie, dodajemy nową funkcję i nazwiemy tę funkcję tutaj, zapisz filtry, możesz
nazwać ją tak, jak chcesz.
Jest to funkcja, która nie przyjmuje żadnych
argumentów, ale ma jedno zadanie, utworzy stałą zastosowanych filtrów, na przykład obiekt, który zbiera nasze filtry.
Więc możemy mieć glutenFree jako klucz i przechowujemy isGlutenFree jako
wartość, mamy laktozę jako klucz i przechowujemy naszą aktualną wartość
stanu isLactoseFree.
Robimy to samo dla wegańskiego z isVegan i robimy to samo dla isVegetarian i
isVegetarian, podobnie jak i później, pocieszę logować to zastosowane filtry.
Chodzi o to, że chciałbym dać dostęp do tej funkcji, która jest częścią mojego komponentu, do moich opcji nawigacyjnych, abym
mógł uruchomić tę funkcję z opcji nawigacyjnych i do tego możemy użyć
parametrów.
Dodajmy efekt użycia, abyśmy mieli sposób wykonywania kodu za każdym razem, gdy zmienia
się nasz stan, ponieważ wtedy chcę przekazać tę zaktualizowaną funkcję, która zasadniczo przechwytuje mój obecny stan do moich opcji
nawigacji.
Więc tutaj mogę dodać efekt użycia, a efekt użycia przyjmuje funkcję, która działa
przy każdej zmianie naszego stanu i niezależnie od tego, jaki komponent jest renderowany, i tam możemy teraz używać parametrów nawigacji rekwizytów.
Wcześniej nie używaliśmy set
params, pracowaliśmy tylko z get param.
Nie korzystaliśmy z ustawionych parametrów, ponieważ zanim ustawiliśmy parametry tylko, gdy nawigowaliśmy do nowego ekranu, to na przykład
tak jak na ekranie kategorii, przekazaliśmy nasze parametry w ten sposób na nowy ekran, ale możemy użyć
ustawionych parametrów, aby zaktualizować parametry wartości dla aktualnie załadowanego ekranu. Teraz na tym ekranie nie mamy żadnych parametrów, więc jest
pusty, dlatego możemy ustawić parametry
nowego obiektu tutaj i chcę tam dodać jeden wpis, ale możesz dodać
tyle, ile chcesz.
Chcę dodać klucz zapisu i możesz wybrać dowolną nazwę dla tego klucza, który chcesz i wskazać filtry zapisu, więc
na tę funkcję. Nie wykonuję funkcji, nie dodam nawiasów,
po prostu na
nią wskazuję, po prostu używam tej zmiennej, która trzyma wskaźnik na tej funkcji na końcu i przekazuję tę
wartość, więc przekaż ten wskaźnik lub zapisz ten wskaźnik do ta funkcja w tym kluczu zapisu, w
tym obiekcie, który teraz ustawiam jako parametry na tym ekranie, na ekranie filtrów.
To pozwala nam przejść do opcji nawigacji i tam mamy dostęp do danych nawigacji,
a tym samym do nawigacji w prawo, a to oznacza, że tutaj, po naciśnięciu tego przycisku, po naciśnięciu tego możemy faktycznie korzystać
z navData. nawigacja. getParam, w
ten sposób możemy pobrać parametr, który jest również dostępny tutaj w opcjach nawigacji, zapisz
i mogę pobrać ten parametr zapisu, który ustawiam tutaj w użyciu, i wiem, że jest to bardzo dziwne, kiedy pierwszy raz to widzisz
i wygląda na naprawdę brudny hack, ale tak nie jest.
Jest to prawidłowy sposób komunikowania się między komponentem a opcjami nawigacji, którego zwykle
potrzebujesz, gdy masz opcje działania w opcjach nawigacji.
Dzięki temu uzyskamy dostęp do naszych parametrów i tam uzyskamy dostęp do parametru zapisu, parametrem zapisu będzie ta funkcja i aktualizujemy wartość tego parametru
za każdym razem, gdy zmienia się nasz stan, i musimy to zrobić, ponieważ w tej
funkcji jest on odtwarzany za każdym razem nasz stan się zmienia i loguje się do najnowszych
wartości stanu i
to jest oczywiście to, czego chcemy, gdy ta funkcja zostanie ostatecznie wykonana za
pomocą parametrów za pomocą tego przycisku w opcjach nawigacji.
Wykorzystujemy więc parametry jako sposób komunikacji między naszym komponentem a opcjami
nawigacji, rodzaj obejścia, ale w rzeczywistości ten, który można znaleźć w oficjalnych
dokumentach, oraz sposób, w jaki się tutaj komunikujesz. Teraz, zanim to zapiszemy, są dwie rzeczy, które musimy zrobić, użyj
efektu już teraz, gdy tylko ten komponent się zaktualizuje. Ostatecznie powinien działać tylko wtedy, gdy filtry zapisu zawierają nową wartość.
Dodam więc drugi argument, aby użyć efektu, którym jest ta tablica zależności, i tam, zapisz filtry, więc
ta zmienna, która posiada funkcję, jest
zależnością, a teraz zawsze będzie się ona odbudowywać
podczas przebudowy komponentu, więc to nie jest naprawdę zależność, która nam pomaga,
ale wkrótce to naprawimy i rekwizyty również są zależnością. Teraz, aby uniknąć niepotrzebnego ponownego renderowania za
każdym razem, gdy zmieni
się cokolwiek w komponencie param, użyję innego sposobu wyodrębnienia mojego rekwizytu nawigacyjnego, użyję tutaj restrukturyzacji, tak jak nawigacja równa
rekwizytom.
Jest to składnia, która wykorzystuje rozkład obiektów, co oznacza, że rekwizyty to obiekty, a to wyciąga klawisz nawigacyjny i przechowuje go w nowej stałej
o tej samej nazwie, a więc w tej samej nawigacji. Przechowuje teraz wartość w rekwizycie nawigacyjnym
w tej stałej nawigacyjnej, to właśnie robi składnia
i zalety, które mamy teraz tutaj stałą nawigacyjną, której możemy użyć w działaniu bez rekwizytów, ponieważ
teraz mamy tę zapisaną w osobnej stałej i teraz możemy dodać to jako zależność, co
oznacza, że kiedy to się zmieni, to zostanie odbudowane, ale
jeśli cokolwiek innego w rekwizytach ulegnie zmianie, nie będzie to niepotrzebnie przywracać efektu.
Teraz, aby mieć pewność, że zapisz filtry aktualizuje się tylko, gdy zmieni się nasz stan, możemy zaimportować hak
wywołania zwrotnego z React, kolejny hak wbudowany w React, co
pozwala nam zawinąć funkcję, dzięki czemu funkcja ta jest buforowana przez React i jest
odtwarzana tylko jeśli zmieniły się jego zależności.
Otaczamy to wokół naszych funkcji filtrów zapisywania, tak jak to, więc przekazujemy tę funkcję jako argument do
użycia wywołania zwrotnego, a użycie
wywołania zwrotnego również przyjmuje drugi argument, który jest tablicą zależności, i tam musimy określić
wszystkie zależności, które
mamy tutaj może się to zmienić, a to doprowadziłoby nas do odtworzenia tej funkcji i zasadniczo
tak jest w przypadku zmiany jednego z czterech stanów tutaj. Tak więc isGlutenFree, isLactoseFree, isVegan i isVegetarian są teraz wszystkimi
zależnościami wywołania zwrotnego użycia, co oznacza, że ta funkcja komponentu zostanie tutaj odtworzona,
jeśli którykolwiek z tych stanów
ulegnie zmianie, jeśli cokolwiek innego spowoduje ponowne renderowanie tego komponentu, nie odtworzymy tego a to
z kolei jest ważne, ponieważ ta funkcja zapisywania filtrów jest zależnością efektu użycia.
Więc jeśli zostanie to odtworzone, użyj ponownie uruchom efekt, który aktualizuje nasze parametry i chcemy ograniczyć to do minimum i nie
stale aktualizować nasze parametry, ale tak naprawdę robimy to tylko wtedy, gdy musimy to zrobić.
Mając to na miejscu, powinniśmy teraz móc nacisnąć przycisk Zapisz i zobaczyć wybrane filtry, więc
przejdźmy do filtrów tutaj i teraz
to się psuje.
Czy masz pojęcie, dlaczego miałby się zepsuć?
Problem polega na tym, że mam tutaj nawigację jako efekt użycia zależności i wyjaśniłem, dlaczego mam to, prawda, że nie
chcę mieć rekwizytów w całości i tak dalej. Problem polega tylko na tym, że kiedy
wywołujemy parametry ustawiania, dodajemy nowe parametry do naszego nawigatora i powoduje to również zmianę
nawigacji.
W końcu mam tutaj nieskończoną pętlę.
Jeśli usunę tutaj nawigację jako zależność, to zadziała. Jeśli teraz to zapiszemy, teraz jeśli
zamkniesz obie aplikacje tutaj za pomocą menedżerów zadań, a następnie uruchomisz je ponownie w
obu systemach operacyjnych, zobaczysz, że teraz to naprawdę działa i możesz kliknąć Zapisz tutaj, a teraz to, co
„ Nie zobaczę tutaj danych wyjściowych w dzienniku.
Ma to jednak sens, ponieważ jeśli przyjrzysz się bliżej przyciskowi zapisu w naszym nagłówku,
to w tym miejscu, co robię w onPress, to w końcu wykonuję tę funkcję, ale co to robi?
Pobiera nasze parametry zapisane w lub zapisane w kluczu zapisu i co
to jest?
Jak wspomniano wcześniej, wskaźnik funkcji zapisywania filtrów, więc pobieramy ten wskaźnik.
Jeśli nie zrobimy nic z tym wskaźnikiem, nic nie robimy.
Jest to wskaźnik funkcji, więc oczywiście musimy ją wykonać w ten sposób, dodając nawiasy.
Alternatywnie, po prostu pozbywamy się tutaj tej anonimowej funkcji strzałki i po prostu wiążemy się z
przyciskiem Pobierz wynik w ten sposób, ponieważ wtedy ten wskaźnik w funkcji zostanie dla nas wykonany po
naciśnięciu tego przycisku, to
jest alternatywa.
Więc teraz, jeśli to zapiszemy i dlatego pozwolimy na ponowne załadowanie
i wrócimy do filtrów, jeśli kliknę tutaj zapisz, zobaczymy teraz wynik w dzienniku, przewińmy trochę tutaj, wszystko
jest ustawione na fałsz.
Jeśli teraz ustawię wartość LaktozaFree i wegetariańska na wartość Prawda, a następnie kliknę przycisk Zapisz, zobaczymy
inny dziennik, a tam naprawdę wegetariańska i LaktozaFree jest ustawiona na wartość Prawda, co dokładnie mam tutaj.
Więc teraz to działa, potwierdźmy, że działa również na Androidzie, przechodząc tam również filtry, ustawmy lactoseFree
na true i zapiszmy to, a jeśli to zrobimy, to jest to nasze
wyjście na Androida tutaj,
lactoseFree jest prawdziwe, wszystko inne jest
fałszywe , więc teraz to również działa.
Dlatego obejście tego problemu może być nieco trudne do obejścia i unikanie tej
nieskończonej pętli
tutaj jest również ważne, upewnij się, że użyjesz tutaj wywołania zwrotnego, aby uniknąć niepotrzebnych przebudowań tej funkcji tutaj,
jest również rzeczą, którą powinieneś zrobić, więc kiedy zaktualizuj parametry i dlatego ten komponent się
przebudowuje, nie przebudowujesz również tej funkcji i dlatego też wchodzisz w nieskończoną pętlę.
Ale dzięki temu mamy sposób komunikowania się między komponentem a opcjami nawigacji, który jest
zwykle wzorcem potrzebnym, gdy masz elementy akcji na pasku akcji i chcesz uruchomić coś, co zależy
od danych zarządzanych w twoim komponencie za pomocą tych guziki.