1 00:00:02,070 --> 00:00:07,740 Jak możemy wyprowadzić tablicę danych jako J jako elementy X? 2 00:00:08,280 --> 00:00:10,200 Właściwie to jest stosunkowo trywialne. 3 00:00:10,740 --> 00:00:19,500 Zmapujemy tę tablicę zadań, obiektów na tablicę J. S. X elementów, ponieważ REACT jest w stanie 4 00:00:19,560 --> 00:00:21,960 wygenerować tablicę elementów JavaScript. 5 00:00:22,450 --> 00:00:23,730 W tym celu pokażę ci, jak to działa. 6 00:00:23,760 --> 00:00:28,170 Użyjmy tych pojedynczych nawiasów klamrowych, ponieważ chcę tutaj dodać wyrażenie JavaScript. 7 00:00:28,500 --> 00:00:33,090 Moim zdaniem, tutaj jest prosta tablica, ale tablica elementów listy. 8 00:00:33,270 --> 00:00:33,900 Cześć. 9 00:00:35,560 --> 00:00:36,510 A potem jeszcze jeden. 10 00:00:36,940 --> 00:00:44,680 To działa, wyprowadzam to w moim kodzie J to X z pojedynczymi nawiasami klamrowymi, ponieważ w tym roku oczywiście nie jest to J to 11 00:00:44,680 --> 00:00:48,700 X, to jest tablica, ale jest to tablica pełna J to X. 12 00:00:49,030 --> 00:00:52,150 A jeśli mam bezpieczeństwo, to daje wysoką moc i to działa. 13 00:00:52,300 --> 00:00:54,880 Otrzymujemy błąd lub ostrzeżenie, które na razie możesz zignorować. 14 00:00:55,210 --> 00:00:56,710 Ale to działa ogólnie. 15 00:00:57,430 --> 00:01:04,390 Teraz, ponieważ działa to na danych zakodowanych na stałe, możemy również wypisywać nasz zestaw celów, abyśmy mogli tutaj wypisywać 16 00:01:04,390 --> 00:01:05,470 cele rekwizytów. 17 00:01:05,860 --> 00:01:12,490 Problem w tym, że cele rekwizytów to w końcu tablica obiektów JavaScript, a nie tablica J. 18 00:01:12,490 --> 00:01:13,030 Kod ASIC. 19 00:01:13,840 --> 00:01:15,400 Więc jeśli spróbujemy wydać w tym roku. 20 00:01:16,400 --> 00:01:17,300 To zawiedzie. 21 00:01:17,540 --> 00:01:21,210 Mówi ci, że obiekty nie są poprawne jako dziecko reagujące. 22 00:01:21,450 --> 00:01:22,460 Podczas gdy my mamy dzieci. 23 00:01:22,760 --> 00:01:28,210 Tak więc ostatecznie nie możemy wyprowadzać zwykłych waniliowych obiektów JavaScript w J to X. 24 00:01:28,730 --> 00:01:34,390 Zamiast tego musimy zamapować każdy obiekt na J jako ekwiwalent X. 25 00:01:34,490 --> 00:01:36,860 Tak więc w odnawialny element. 26 00:01:37,520 --> 00:01:41,210 Więc tutaj chcemy na końcu zamapować każdy obiekt na element listy. 27 00:01:42,050 --> 00:01:44,180 Tak więc na rekwizytach cele, które są tablicą. 28 00:01:44,660 --> 00:01:46,370 Możemy wywołać metodę mapy. 29 00:01:46,580 --> 00:01:50,450 Jest to domyślna waniliowa metoda JavaScript, która istnieje w dowolnej tablicy. 30 00:01:50,840 --> 00:01:53,300 Metoda mapy ma funkcję. 31 00:01:54,110 --> 00:01:59,400 Tutaj przekażę funkcję strzałki, która jest wykonywana na każdym elemencie tablicy. 32 00:01:59,450 --> 00:02:04,220 Włączysz mapę, a wtedy dysfunkcja wróci. 33 00:02:04,630 --> 00:02:10,630 Przekształć słowa tego elementu w oryginalnej tablicy, a ogólna mapa zwróci nową tablicę 34 00:02:10,730 --> 00:02:13,100 pełną tych przekształconych elementów danych. 35 00:02:13,910 --> 00:02:17,810 Dlatego funkcja ta otrzyma tutaj istniejący element. 36 00:02:17,900 --> 00:02:22,490 Więc każdy cel w naszej tablicy celów, a następnie zwraca nowy element. 37 00:02:23,150 --> 00:02:28,010 Więc w tej nowej tablicy, wróć mapą, chcę, żeby kilka J zawierało X elementów. 38 00:02:28,100 --> 00:02:30,830 Więc tutaj zwrócę tylko element listy. 39 00:02:31,850 --> 00:02:33,320 Która jest oczywiście eks. 40 00:02:35,100 --> 00:02:41,730 I element listy, chcę wyprowadzić mój złoty tekst, nie ma tutaj celu, że obiekt JavaScript mamy w oryginalnej 41 00:02:41,730 --> 00:02:46,770 tablicy, ponieważ ta funkcja działa na każdym elemencie w oryginalnej tablicy i daje obiekt 42 00:02:46,770 --> 00:02:51,240 w oryginalnej szybkości lub danych kawałek w oryginalnej tablicy jako argument. 43 00:02:51,600 --> 00:02:54,630 Więc celem jest ten obiekt, który wygląda jak w tym roku. 44 00:02:56,010 --> 00:02:57,660 Więc interesuje mnie tylko tekst tutaj. 45 00:02:57,900 --> 00:03:02,150 I znowu możemy wyprowadzić tekst, wysyłając tutaj wyrażenie JavaScript. 46 00:03:02,340 --> 00:03:07,970 Dlatego potrzebujemy nawiasów klamrowych w naszym kodzie J jest X tutaj i mamy tutaj tekst kropki celu. 47 00:03:09,010 --> 00:03:12,670 Wyrażam to, że mam dostęp do właściwości tekstu na złotym obiekcie. 48 00:03:13,540 --> 00:03:21,250 Tak więc teraz dzieje się to, że mapuję moją tablicę prostych obiektów JavaScript na tablicę J to elementy X, a 49 00:03:21,490 --> 00:03:25,630 taka tablica G. S. X elementów to rachunek renderowania, jak się dowiedziałeś. 50 00:03:27,780 --> 00:03:28,950 Teraz chroń twarz. 51 00:03:30,600 --> 00:03:33,060 Widzisz, to znowu przechytrza moje podstawowe umiejętności. 52 00:03:33,810 --> 00:03:40,250 Teraz otrzymujemy również ostrzeżenie dotyczące unikalnego klucza związanego z tym, jak reaguje ponownie renderuje DOM i że 53 00:03:40,290 --> 00:03:42,180 chce to zrobić skutecznie. 54 00:03:42,450 --> 00:03:45,030 Więcej na ten temat dowiesz się w moim React, pełnym przewodniku. 55 00:03:45,360 --> 00:03:51,330 Dlatego za każdym razem, gdy generujesz listy danych za pomocą tej techniki, musisz dodać specjalny rekwizyt 56 00:03:51,570 --> 00:03:54,600 do każdego elementu, który wyświetlasz na liście. 57 00:03:54,630 --> 00:03:56,010 W takim przypadku do każdego elementu listy. 58 00:03:56,390 --> 00:04:00,390 I to jest kluczowy rekwizyt, który rekwizyt sam rozumie. 59 00:04:00,690 --> 00:04:03,120 I tutaj chcę przedstawić cel I. RE. jeszcze raz. 60 00:04:03,280 --> 00:04:04,480 Owinięte w nawiasy klamrowe. 61 00:04:04,500 --> 00:04:06,810 Ponieważ jest to regularne wyrażenie JavaScript. 62 00:04:08,350 --> 00:04:11,740 Więc teraz z tatą nie otrzymujemy ostrzeżenia i osiągamy nasze cele kursu. 63 00:04:12,130 --> 00:04:14,380 W ten sposób wypisujemy listę danych. 64 00:04:16,400 --> 00:04:18,650 Dzięki temu wygląda to całkiem nieźle. 65 00:04:18,680 --> 00:04:20,150 Tworzymy naszą listę danych. 66 00:04:20,300 --> 00:04:26,000 Dlaczego nie pracujemy teraz nad dodaniem funkcjonalności, która pozwala nam dodawać własne cele? 67 00:04:26,300 --> 00:04:27,920 To byłby miły następny krok.