Teraz, gdy są to komunikaty o błędach, otrzymamy komunikaty o błędach podczas programowania, a ich odczytanie jest bardzo ważną rzeczą,
ponieważ naprawdę mogą pomóc nam dowiedzieć się, co jest nie tak.
Przejdźmy teraz do błędów, które niekoniecznie rzucają komunikaty o błędach lub gdzie trzeba głębiej
kopać, aby znaleźć podstawową przyczynę. Teraz powiedzmy na przykład, że w aplikacji. js, chcieliśmy dowiedzieć się,
czy naprawdę usuwamy tutaj właściwy cel. Aby dowiedzieć się, czy tak jest w tym przypadku, możemy
w tym miejscu zalogować się do naszego identyfikatora celu, dodać tekst informacyjny, na przykład usunąć, aby uzyskać informacje o tym, co się tu
drukuje, i oczywiście mamy naszą listę tutaj cele, więc jest to lista bez usuwania elementu, a potem chcielibyśmy go zobaczyć
po usunięciu, ale sposób, w jaki ta
funkcja ustawia stan działa tutaj
w końcu, sposób React aktualizuje stan, po prostu drukując ponownie cele kursu
w tej linii nie podadzą nam już zaktualizowanych celów kursu, zamiast tego
zostaną zaktualizowane dopiero w następnym cyklu renderowania.
Więc nie zobaczymy tam naszych celów kursu, ale to nie jest
problem, musimy tylko zalogować to w innym miejscu, rejestrujemy to tutaj, w naszym komponencie. Tam rejestrujemy cele kursu i cały ten komponent
zostanie ponownie wyrenderowany, gdy zaktualizujemy nasze cele kursu o tę linię, więc
to
się uruchomi ponownie, więc może możemy po prostu dodać trochę dziennika konsoli, ponownie renderując komponent, abyśmy wiemy, że lista celów kursu,
którą drukujemy po tej, jest listą po każdym cyklu ponownego renderowania, podczas gdy lista celów kursu, którą drukujemy po
tej linii do usunięcia, jest listą celów kursu, zanim usunęliśmy cel kursu,
a teraz dodaliśmy kilka instrukcji dziennika konsoli, które pozwalają nam
zanurzyć się w przepływie naszego kodu. Dzięki temu, jeśli to zapiszę, aplikacja uruchomi się ponownie, a my już
zobaczymy komponent do renderowania, który ma sens, zostanie renderowany za pierwszym razem i zobaczymy, że mamy pustą
tablicę, która również ma sens, ponieważ niczego nie dodaliśmy.
Teraz dodajmy nowy cel, może tutaj na Androida, ukończ kurs. Jeśli to zrobimy, zobaczymy ponowne renderowanie
komponentu, ma sens, ponieważ dodaliśmy coś, a co najważniejsze dla drugiego renderowania,
w którym dodaliśmy element, widzimy ten element tutaj w tablicy,
widzimy również identyfikator ten przedmiot i wartość, która wygląda dobrze. Teraz dodajmy kolejny element, naucz się React Native i dodaj to i widzimy to
tutaj, teraz widzimy, że jest to tablica z
dwoma elementami, jeśli rozwiniemy to tutaj. Możemy teraz przejrzeć nasz kod, a teraz usuńmy element, klikając
go i usuńmy element kursu o ID 0. 818 i tak dalej.
Więc jeśli kliknę przycisk Zakończ kurs, zobaczysz,
że został on usunięty, więc wydaje się, że działa
poprawnie i nasz dziennik konsoli to potwierdza, ponownie renderujemy, ponownie renderujemy naszą tablicę tylko z tym identyfikatorem, więc z
drugim element, którego nie usunęliśmy i tam, widzimy, że jest usuwany, to ten identyfikator
tutaj, ten dziennik pochodzi z tego wiersza, zanim go
usunęliśmy, więc nadal jest uwzględniany, ale w następnym cyklu ponownego renderowania widzimy, że to Identyfikator tutaj nie jest
już uwzględniony.
Oczywiście jest to trochę wymyślony
przykład, oczywiście widzimy, że zachowuje się tutaj poprawnie, ale wyobraź sobie, że masz bardziej złożony
przepływ w kodzie, który chcesz debugować, wtedy takie instrukcje dziennika konsoli mogą naprawdę pomóc zrozumieć, w
jaki sposób kod działa, jak często działa i czy używane są prawidłowe wartości.
Tak więc instrukcje dziennika konsoli mogą być naprawdę pomocne, jeśli zrzucisz je do swojego kodu,
po prostu nie zapomnij o ich ostatecznym usunięciu, aby nie tłoczyć kodu za pomocą mnóstwa instrukcji dziennika konsoli.