React: Wyswietlanie pojedynczej notatki cz. 2

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć logikę, która pozwala

0:04nam wyświetlać odpowiednie notatki po kliknięciu w odpowiednią kartę. Natomiast,

0:08jeśli wejdziemy sobie w jakąś notatkę i odświeżymy to dostajemy sporo błędów. Wynika

0:13to z faktu, że po odświeżeniu nasz store się zeruje i on już nie ma

0:17tej notatki w swojej pamięci, więc jeśli ktoś wejdzie w taki

0:21sposób do naszej notatki bo na przykład dostał od kolegi linka. No to mamy problem, ale

0:26możemy go dość łatwo rozwiązać, tworząc sobie komponent, który

0:30będzie zawierał dodatkową logikę chroniącą nas przed tym błędem. Sprawa

0:36wygląda w taki sposób, że możemy sobie tutaj dodać component did mount i sprawdzać

0:42czy this props active item istnieje i jeśli

0:46item nie istnieje, wtedy możemy strzelić

0:50sobie zapytaniem przez axios'a do naszego

0:54API i teraz nasze zapytanie wygląda w taki sposób, że mamy tutaj note

0:59i po note po slash'u mamy id, to id możemy podobnie jak tutaj wyciągnąć

1:03sobie z match params id, więc

1:08możemy stworzyć sobie konsta, który wyciąga nam id z this

1:13props match params i w

1:24tym miejscu po slash'u możemy sobie podać nasz id. Jeśli

1:30wszystko pójdzie dobrze to wyciągniemy

1:35sobie data i na razie zrobimy z niej console log'a. Jeśli

1:39coś pójdzie nie tak, to również możemy sobie wyrzucić

1:44efekt tego co się wydarzyło. Tutaj literówka w imporcie i teraz

1:49zanim zaczniemy obsługiwać sobie to zapytanie, to jeszcze zejdziemy tutaj na dół, ponieważ mamy

1:53mały problem. Nie można filtrować undefind, więc

2:05możemy sobie zrobić coś takiego, że jeśli

2:12nasz, nasza tablica na przykład twitters w state'ie

2:16ma jakąś długość, wtedy

2:23możemy zwrócić sobie to, co zwracaliśmy

2:27tutaj, czyli active item, okej

2:33tutaj mamy błąd, że length jest undefined, wynika to z tego, że w naszym initial state'ie

2:37nie ma pustych tablic twitters, notes i articles, więc po

2:41prostu sprawdźmy czy ta tablica istnieje w naszym state'cie, okej i

2:46tutaj już chyba wszystko jest w porządku, bo

2:50ten błąd bardziej dotyczy wydaje mi się tej destrukturyzacji, więc pozbądźmy

2:55się na razie tego item. Stwórzmy sobie state w naszym komponencie, który

3:00będzie właśnie miał nazwę active item. Początkowo on będzie null'em

3:04i teraz sprawdzimy sobie czy

3:10this props active item istnieje. Jeśli tak, to

3:15niech active item w naszym state'cie będzie

3:19właśnie równy temu active item z props'ów. Natomiast

3:24jeśli nic takiego nie ma, to

3:29robimy strzał do naszego axios'a, tutaj tego if'a możemy sobie wyrzucić

3:33i tutaj jeszcze w funkcji render możemy

3:38sobie teraz zdestrukturyzować active item, ale z naszego state'u, tutaj

3:44każdy item musimy zamienić na active item, okej

3:49i teraz jesteśmy już prawie w domu, bo to znaczy, że

3:53ta logika tutaj powinna działać. Zaraz zobaczymy, co z tego wyszło. Spróbujmy

4:00sobie wylogować this props active item.

4:04Wygląda na to, jakby to w ogóle nie wchodziło

4:08do żadnego warunku, który tutaj stworzyliśmy, okej,

4:13po zmianie naszego active item na obiekt, który ma po prostu puste stringi.

4:17Wszystko

4:21wydaje się, wróciło do normy a ponadto

4:34widzimy, że nasza logika zaczęła działać, ponieważ

4:38mamy tutaj console log data, który właśnie nam wypluwa wszystko

4:42czego potrzebujemy, więc teraz teoretycznie

4:46tutaj w tym then możemy sobie stworzyć this state set state, gdzie

4:52mówimy active item jest równy

4:56data. I jak widzisz dane,

5:01które zaczytujemy sobie z naszego API podmieniają nasz pierwotny

5:05state w naszym komponencie przez co dane

5:09na temat Dan'a Abramov'a się wyświetlają. Jak wrócimy sobie teraz

5:13do naszego widoku głównego to

5:18coś przestało działać. Sprawdźmy co tym razem, okej,

5:24po odświeżeniu na widoku notatki mamy  undefined jeśli chodzi

5:28o this props active item, czyli o to przekazywany tutaj z tego miejsca. Natomiast

5:34kiedy wchodzimy sobie do naszej notatki z poziomu dashboard'u, to

5:38mamy faktycznie naszą tablice z jednym obiektem, więc mój błąd polegał na tym, że

5:42w tym miejscu powinniśmy zdestrukturyzować sobie const active item z this

5:49props i w tym momencie po prostu możemy zrobić coś

5:56takiego i jeśli wyjdziemy

6:00sobie z naszych twitter'ów, to znowu mamy błąd, ale

6:04wydaje mi się, że chodzi tylko o to, że tutaj po prostu musimy dodać

6:08active item i teraz uwaga, chwila prawdy i nasza

6:13aplikacja działa poprawnie, czyli możemy dostać się do notatki z poziomu

6:17dashboard'u możemy sobie odświeżyć stronę i również się załaduje, więc

6:25nasze komponenty działają poprawnie.