Jak możemy rozwiązać problem, że musimy tutaj znaleźć konkretny posiłek i nie możemy tak naprawdę użyć
naszego selektora tutaj w opcjach nawigacji?
Teraz są dwie możliwe poprawki - poprawka numer jeden polega na tym, że ponownie używamy starych dobrych
parametrów do komunikacji między komponentem
a opcjami nawigacji, jak pokazałem to w module nawigacji. Tutaj w komponencie ładujemy nasz posiłek, więc oczywiście
tutaj możemy użyć rekwizytów nawigacyjnych ustaw parametry i teraz ustaw parametry na nową tutaj, a teraz możemy użyć ustaw parametrów, aby
przekazać wybrany posiłek lub jego tytuł do nagłówka i cokolwiek przy tym ustawisz, to parametry zostaną
połączone z istniejącymi parametrami, więc to nie zastąpi ich, więc nie przesłonisz posiłku.
Jeśli odzyskujesz tutaj, to wciąż tam będzie, po prostu dodając coś
nowego, zastępujesz parametr tylko wtedy, gdy już istnieje w parametrach.
Więc tutaj możemy dodać klucz tytułu posiłku i ustawić go na wybrany posiłek. tytuł.
Oznacza to, że wysłałem te parametry do mojego nagłówka, gdy ten komponent renderuje się na końcu.
Ponieważ zmieni to rekwizyty, zwykle skończymy w nieskończonej pętli, więc
aby to przerwać, użyjemy tutaj efektu użycia, tak jak
pokazałem to w module nawigacyjnym, i faktycznie zrobimy to wewnątrz efektu użycia.
Więc tutaj możemy użyć efektu użycia i
jako zależność, na razie określę pustą tablicę, a następnie ustawię parametry w funkcji efektu użycia
i
nie będę tutaj pustej tablicy, zamiast tego moja zależność jest wybrana posiłek.
Kiedy to się zmieni, chcę przekazać nowe informacje do nagłówka. Teraz zobaczymy, czy to zadziała, przejdźmy do nagłówka i
tam możemy
teraz pobrać to z parametrów.
Więc tutaj mam tytuł posiłku, mogę
go uzyskać za pomocą NavigationData. nawigacja. tytuł posiłku getParam, to
nazwa, którą wybrałem, ustawiając tutaj parametry.
Teraz po wybraniu tutaj
tytułu posiłku możemy ustawić tytuł nagłówka na ten tytuł posiłku i skomentować ten wiersz, ponieważ i tak
nie będzie działał i spróbujmy.
Zapiszmy to i przejdźmy do strony ze szczegółami, a gdy
to zadziała, zobaczysz problem. Kiedy to się ładuje, początkowo nie ma tytułu, a
pojawia się on dopiero po chwili.
Tak więc dopiero po pełnym załadowaniu widzimy ten tytułowy pop, który nie jest
zbyt piękny, a powodem
tego jest po prostu to, że nasza logika tutaj działa, ale ponieważ efekt użycia działa
po renderowaniu komponentu po raz pierwszy, czekamy dla komponentu, który będzie renderowany po raz
pierwszy, dopóki nie wyślemy params do tytułu, a to oznacza, że kiedy to przejście jest nadal
odtwarzane, a renderowanie nie zostało w pełni zakończone, tak naprawdę nie pokazujemy tego tytułu.
Dlatego może nie być to tutaj
optymalne rozwiązanie i skomentuję to. Lepszym rozwiązaniem tutaj, choć może wydawać się
to tanie, ale jest to również rozwiązanie, z którego często możesz skorzystać, jest po prostu
przesłanie tytułu, którego będziemy potrzebować, z wnętrza komponentu, z którego pochodzisz, aby go załadować gdy jesteś w
komponencie, który przejdzie do tego komponentu i wysyłasz go do tego komponentu przed załadowaniem.
Prześlijmy więc dane z wyprzedzeniem, a my przechodzimy z
ekranu ulubionych lub ekranu kategorii posiłków. Tam, w końcu stukamy element na liście posiłków i w obu
elementach, w obu komponentach, ekranie ulubionych i ekranie kategorii posiłków, używamy listy posiłków, co
jest dobre, ponieważ oznacza to, że możemy przejść do listy posiłków tutaj i tam mamy akcję nawigacyjną, a teraz po
prostu oprócz podania identyfikatora posiłku, dobrze byłoby, gdybyśmy tutaj już przekazali tytuł posiłku, ponieważ mamy go tutaj, prawda?
itemData. pozycja. tytuł, to nasz tytuł posiłku. Dostarczając go tutaj, rozwiązujemy
wszystkie problemy, które mamy na drugim ekranie, więc zdecydowanie takie podejście chcemy zastosować tutaj.
Tak więc, ustawiając ten parametr tutaj w komponencie, w którym uruchamiamy akcję nawigacyjną na stronie szczegółów posiłku,
naprawiliśmy ten problem, ponieważ teraz widzisz tytuł od samego początku i nie mamy żadnego problemu i to
samo oczywiście także na Androida, jeśli spróbujemy. Mój emulator jest trochę
powolny, ale ogólnie można go również zobaczyć. W ten sposób możemy pracować z danymi w
nagłówku, gdy potrzebujemy ich od Redux, a dzięki temu mamy solidny pierwszy stan, jesteśmy w stanie korzystać
z naszych danych Redux. To, czego tak naprawdę nie jesteśmy
w stanie zrobić, to zmienić, więc to kolejny krok, chcemy dodać logikę, abyśmy mogli zmienić dane, abyśmy mogli
oznaczyć ulubione i abyśmy mogli filtrować nasze dane.