1
00:00:02,070 --> 00:00:07,740
Comment pouvons-nous produire un tableau de données sous forme d'éléments J en tant que X?

2
00:00:08,280 --> 00:00:10,200
Eh bien, en fait, c'est relativement trivial.

3
00:00:10,740 --> 00:00:19,500
Nous allons mapper ce tableau de travaux, objets à un tableau de J. S. Éléments X car REACT est capable de

4
00:00:19,560 --> 00:00:21,960
générer un tableau d'éléments JavaScript.

5
00:00:22,450 --> 00:00:23,730
Pour cela, permettez-moi de vous montrer comment cela fonctionne.

6
00:00:23,760 --> 00:00:28,170
Utilisons ces accolades simples, car je veux ajouter une expression JavaScript ici.

7
00:00:28,500 --> 00:00:33,090
Dans mon expression, voici un tableau simple, mais un tableau d'éléments de liste.

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

9
00:00:35,560 --> 00:00:36,510
Et puis un autre.

10
00:00:36,940 --> 00:00:44,680
Cela fonctionne, je produis ceci dans mon code J is X avec les accolades simples car cette année bien sûr n'est pas J est X,

11
00:00:44,680 --> 00:00:48,700
c'est un tableau, mais c'est un tableau plein de J est X.

12
00:00:49,030 --> 00:00:52,150
Et si je sécurise, ça sort haut et ça marche.

13
00:00:52,300 --> 00:00:54,880
Nous obtenons une erreur ou un avertissement que vous pouvez ignorer pour l'instant.

14
00:00:55,210 --> 00:00:56,710
Mais cela fonctionne en général.

15
00:00:57,430 --> 00:01:04,390
Maintenant, puisque cela fonctionne avec des données codées en dur, nous pouvons également générer notre tableau d'objectifs afin de pouvoir produire des

16
00:01:04,390 --> 00:01:05,470
objectifs d'accessoires ici.

17
00:01:05,860 --> 00:01:12,490
Mais le problème est que les objectifs des accessoires sont finalement un tableau d'objets JavaScript, pas un tableau de J.

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

19
00:01:13,840 --> 00:01:15,400
Donc, si nous essayons de produire cette année.

20
00:01:16,400 --> 00:01:17,300
Cela échouera.

21
00:01:17,540 --> 00:01:21,210
Il vous indique que les objets ne sont pas valides comme enfant réactif.

22
00:01:21,450 --> 00:01:22,460
Alors que nous avons des enfants.

23
00:01:22,760 --> 00:01:28,210
Donc, à la fin, nous ne pouvons pas produire d'objets JavaScript simples en vanille dans J est X.

24
00:01:28,730 --> 00:01:34,390
Au lieu de cela, nous devons mapper chaque objet dans un J en tant qu'équivalent X.

25
00:01:34,490 --> 00:01:36,860
Donc dans un élément renouvelable.

26
00:01:37,520 --> 00:01:41,210
Donc, ici, nous voulons mapper chaque objet dans un élément de liste à la fin.

27
00:01:42,050 --> 00:01:44,180
Donc, sur les objectifs des accessoires, qui est un tableau.

28
00:01:44,660 --> 00:01:46,370
Nous pouvons appeler la méthode map.

29
00:01:46,580 --> 00:01:50,450
C'est une méthode JavaScript vanille par défaut qui existe sur n'importe quel tableau.

30
00:01:50,840 --> 00:01:53,300
La méthode map prend une fonction.

31
00:01:54,110 --> 00:01:59,400
Ici, je vais passer une fonction de flèche qui est exécutée sur chaque élément du tableau.

32
00:01:59,450 --> 00:02:04,220
Vous appelez la carte et le dysfonctionnement reviendra ici.

33
00:02:04,630 --> 00:02:10,630
Transformez les mots de cet élément dans le tableau d'origine et la carte globale renverra alors un nouveau

34
00:02:10,730 --> 00:02:13,100
tableau plein de ces données transformées.

35
00:02:13,910 --> 00:02:17,810
Cette fonction recevra donc ici l'élément existant.

36
00:02:17,900 --> 00:02:22,490
Ainsi, chaque objectif de notre tableau d'objectifs renvoie un nouvel élément.

37
00:02:23,150 --> 00:02:28,010
Donc, dans ce nouveau tableau, retour par carte, je veux avoir un tas de J a X éléments.

38
00:02:28,100 --> 00:02:30,830
Ici, je vais simplement retourner un élément de liste.

39
00:02:31,850 --> 00:02:33,320
Elle est ex, bien sûr.

40
00:02:35,100 --> 00:02:41,730
Et l'élément de liste, je veux sortir mon texte d'or, aucun objectif ici n'est que l'objet JavaScript que nous avons dans votre

41
00:02:41,730 --> 00:02:46,770
tableau d'origine, car cette fonction s'exécute sur chaque élément du tableau d'origine et vous donne l'objet

42
00:02:46,770 --> 00:02:51,240
dans le taux d'origine ou les données pièce dans le tableau d'origine comme argument.

43
00:02:51,600 --> 00:02:54,630
Donc, le but ici est cet objet, qui ressemble à cette année.

44
00:02:56,010 --> 00:02:57,660
Je ne suis donc intéressé que par le texte ici.

45
00:02:57,900 --> 00:03:02,150
Et encore une fois, nous pouvons sortir le texte en sortant une expression JavaScript ici.

46
00:03:02,340 --> 00:03:07,970
Par conséquent, nous avons besoin d'accolades dans notre code J is X ici et nous avons ici un texte de point d'objectif.

47
00:03:09,010 --> 00:03:12,670
Mon expression est que j'accède à la propriété de texte sur l'objet or.

48
00:03:13,540 --> 00:03:21,250
Alors maintenant, ce qui se passe ici est que je mappe mon tableau d'objets JavaScript simples à un tableau d'éléments J is X, et un

49
00:03:21,490 --> 00:03:25,630
tel tableau de G. S. Les éléments X sont le rendu de facture, comme vous l'avez appris.

50
00:03:27,780 --> 00:03:28,950
Maintenant, faites face à la sécurité.

51
00:03:30,600 --> 00:03:33,060
Vous voyez, cela déjoue à nouveau mes compétences de base.

52
00:03:33,810 --> 00:03:40,250
Maintenant, nous recevons également un avertissement concernant une clé unique qui est liée à la façon dont React rend le DOM

53
00:03:40,290 --> 00:03:42,180
et qu'il souhaite le faire efficacement.

54
00:03:42,450 --> 00:03:45,030
Vous en apprendrez plus à ce sujet dans mon React, le cours de guide complet.

55
00:03:45,360 --> 00:03:51,330
Et donc, chaque fois que vous générez des listes de données avec cette technique, vous devez ajouter un accessoire spécial

56
00:03:51,570 --> 00:03:54,600
à chaque élément que vous affichez dans la liste.

57
00:03:54,630 --> 00:03:56,010
Dans ce cas, à chaque élément de la liste.

58
00:03:56,390 --> 00:04:00,390
Et c'est l'accessoire clé qui est un accessoire qu'il comprend lui-même.

59
00:04:00,690 --> 00:04:03,120
Et ici, je veux sortir l'objectif I. RÉ. encore.

60
00:04:03,280 --> 00:04:04,480
Enveloppé dans des accolades frisées.

61
00:04:04,500 --> 00:04:06,810
Parce que c'est une expression JavaScript régulière.

62
00:04:08,350 --> 00:04:11,740
Alors maintenant avec papa, nous ne recevons pas l'avertissement et nous obtenons nos objectifs de cours.

63
00:04:12,130 --> 00:04:14,380
Voilà donc comment nous sortons une liste de données.

64
00:04:16,400 --> 00:04:18,650
Avec cela, cela semble assez bon.

65
00:04:18,680 --> 00:04:20,150
Nous sortons notre liste de données.

66
00:04:20,300 --> 00:04:26,000
Pourquoi ne travaillons-nous pas maintenant à ajouter des fonctionnalités qui nous permettent d'ajouter nos propres objectifs?

67
00:04:26,300 --> 00:04:27,920
Ce serait une belle prochaine étape.