1
00:00:02,070 --> 00:00:07,740
Bagaimana kita bisa menampilkan array data sebagai elemen J sebagai X?

2
00:00:08,280 --> 00:00:10,200
Sebenarnya ini relatif sepele.

3
00:00:10,740 --> 00:00:19,500
Kami akan memetakan array pekerjaan ini, objek ke array J. S. Elemen X karena REACT mampu

4
00:00:19,560 --> 00:00:21,960
menghasilkan array elemen JavaScript.

5
00:00:22,450 --> 00:00:23,730
Untuk itu, izinkan saya menunjukkan kepada Anda bagaimana ini bekerja.

6
00:00:23,760 --> 00:00:28,170
Mari kita gunakan kurung kurawal tunggal ini, karena saya ingin menambahkan ekspresi JavaScript di sini.

7
00:00:28,500 --> 00:00:33,090
Dalam ekspresi saya, di sini adalah array sederhana, tetapi array daftar item.

8
00:00:33,270 --> 00:00:33,900
Hai.

9
00:00:35,560 --> 00:00:36,510
Dan satu lagi.

10
00:00:36,940 --> 00:00:44,680
Ini berfungsi, saya output ini dalam kode J is X saya dengan kurung kurawal tunggal karena tahun ini tentu saja bukan J adalah

11
00:00:44,680 --> 00:00:48,700
X, ini adalah array, tetapi array penuh dengan J adalah X.

12
00:00:49,030 --> 00:00:52,150
Dan jika saya menyimpannya, outputnya tinggi dan ini berfungsi.

13
00:00:52,300 --> 00:00:54,880
Kami mendapatkan kesalahan atau peringatan yang dapat Anda abaikan untuk saat ini.

14
00:00:55,210 --> 00:00:56,710
Tetapi ini bekerja secara umum.

15
00:00:57,430 --> 00:01:04,390
Sekarang, karena ini bekerja dengan data kode keras, kami juga dapat menampilkan berbagai tujuan kami sehingga kami dapat menampilkan sasaran alat

16
00:01:04,390 --> 00:01:05,470
peraga di sini.

17
00:01:05,860 --> 00:01:12,490
Tetapi masalahnya adalah bahwa alat peraga sasaran pada akhirnya adalah array dari objek JavaScript, bukan array dari J.

18
00:01:12,490 --> 00:01:13,030
Kode ASIC.

19
00:01:13,840 --> 00:01:15,400
Jadi jika kita mencoba output tahun ini.

20
00:01:16,400 --> 00:01:17,300
Itu akan gagal.

21
00:01:17,540 --> 00:01:21,210
Ini memberi tahu Anda bahwa objek tidak valid sebagai reaksi anak.

22
00:01:21,450 --> 00:01:22,460
Padahal kita punya anak.

23
00:01:22,760 --> 00:01:28,210
Jadi pada akhirnya, kita tidak bisa menampilkan objek JavaScript vanilla polos di J adalah X.

24
00:01:28,730 --> 00:01:34,390
Sebagai gantinya, kita perlu memetakan setiap objek menjadi J sebagai X yang setara.

25
00:01:34,490 --> 00:01:36,860
Jadi menjadi elemen yang terbarukan.

26
00:01:37,520 --> 00:01:41,210
Jadi di sini kita ingin memetakan setiap objek menjadi daftar item pada akhirnya.

27
00:01:42,050 --> 00:01:44,180
Begitu juga dengan alat peraga tujuan, yang merupakan array.

28
00:01:44,660 --> 00:01:46,370
Kita bisa memanggil metode peta.

29
00:01:46,580 --> 00:01:50,450
Itu metode JavaScript vanilla default yang ada pada array apa pun.

30
00:01:50,840 --> 00:01:53,300
Metode peta mengambil fungsi.

31
00:01:54,110 --> 00:01:59,400
Di sini, saya akan melewatkan fungsi panah yang dijalankan pada setiap elemen array.

32
00:01:59,450 --> 00:02:04,220
Anda memanggil peta dan kemudian disfungsi di sini akan kembali.

33
00:02:04,630 --> 00:02:10,630
Transformasikan kata-kata elemen itu di dalam array asli dan keseluruhan peta kemudian akan mengembalikan array baru yang penuh

34
00:02:10,730 --> 00:02:13,100
dengan potongan data yang diubah ini.

35
00:02:13,910 --> 00:02:17,810
Jadi fungsi ini akan menerima elemen yang ada di sini.

36
00:02:17,900 --> 00:02:22,490
Jadi, setiap sasaran dalam array tujuan kami dan kemudian mengembalikan elemen baru.

37
00:02:23,150 --> 00:02:28,010
Jadi dalam array baru ini, kembali dengan peta, saya ingin memiliki sekelompok elemen J memiliki X.

38
00:02:28,100 --> 00:02:30,830
Jadi di sini saya hanya akan mengembalikan item daftar.

39
00:02:31,850 --> 00:02:33,320
Yang mana dia mantan, tentu saja.

40
00:02:35,100 --> 00:02:41,730
Dan daftar item, saya ingin menampilkan teks emas saya, tidak ada tujuan di sini adalah objek JavaScript yang kami miliki di

41
00:02:41,730 --> 00:02:46,770
array asli Anda, karena fungsi ini berjalan pada setiap elemen dalam array asli dan memberi

42
00:02:46,770 --> 00:02:51,240
Anda objek dalam tingkat asli atau data potong dalam array asli sebagai argumen.

43
00:02:51,600 --> 00:02:54,630
Jadi tujuan di sini adalah objek itu, yang terlihat seperti tahun ini.

44
00:02:56,010 --> 00:02:57,660
Jadi saya hanya tertarik pada teks di sini.

45
00:02:57,900 --> 00:03:02,150
Dan lagi, kita dapat menampilkan teks dengan mengeluarkan ekspresi JavaScript di sini.

46
00:03:02,340 --> 00:03:07,970
Oleh karena itu, kita perlu mengeriting tanda kurawal di J kita adalah kode X di sini dan kita memiliki tujuan teks titik di sini.

47
00:03:09,010 --> 00:03:12,670
Ekspresi saya adalah bahwa saya mengakses properti teks pada objek emas.

48
00:03:13,540 --> 00:03:21,250
Jadi sekarang yang terjadi di sini adalah saya memetakan array objek JavaScript biasa ke array elemen J adalah X, dan

49
00:03:21,490 --> 00:03:25,630
array seperti G. S. Elemen X adalah render bill, seperti yang Anda pelajari.

50
00:03:27,780 --> 00:03:28,950
Sekarang, hadapi keamanan.

51
00:03:30,600 --> 00:03:33,060
Anda lihat, ini mengecoh keterampilan inti saya lagi.

52
00:03:33,810 --> 00:03:40,250
Sekarang kami juga mendapatkan peringatan mengenai kunci unik yang terkait dengan bagaimana reaksi membuat DOM dan ingin

53
00:03:40,290 --> 00:03:42,180
melakukan ini secara efisien.

54
00:03:42,450 --> 00:03:45,030
Anda belajar lebih banyak tentang itu di React saya, kursus panduan lengkap.

55
00:03:45,360 --> 00:03:51,330
Dan karena itu, kapan pun Anda menampilkan daftar data dengan teknik ini, Anda harus menambahkan prop khusus

56
00:03:51,570 --> 00:03:54,600
untuk setiap item yang Anda render dalam daftar.

57
00:03:54,630 --> 00:03:56,010
Dalam hal ini, untuk setiap item daftar.

58
00:03:56,390 --> 00:04:00,390
Dan itulah prop kunci yang prop yang bereaksi sendiri mengerti.

59
00:04:00,690 --> 00:04:03,120
Dan di sini saya ingin menampilkan tujuan I. D. lagi.

60
00:04:03,280 --> 00:04:04,480
Dibungkus dengan kurung kurawal.

61
00:04:04,500 --> 00:04:06,810
Karena ini adalah ekspresi JavaScript biasa.

62
00:04:08,350 --> 00:04:11,740
Jadi sekarang dengan ayah, kami tidak mendapatkan peringatan dan kami mendapatkan tujuan kursus kami.

63
00:04:12,130 --> 00:04:14,380
Jadi ini adalah bagaimana kami menampilkan daftar data.

64
00:04:16,400 --> 00:04:18,650
Dengan itu, ini terlihat cukup bagus.

65
00:04:18,680 --> 00:04:20,150
Kami mengeluarkan daftar data kami.

66
00:04:20,300 --> 00:04:26,000
Mengapa sekarang kita tidak berupaya menambahkan beberapa fungsi yang memungkinkan kita untuk menambah tujuan kita sendiri?

67
00:04:26,300 --> 00:04:27,920
Itu akan menjadi langkah selanjutnya yang menyenangkan.