1
00:00:02,070 --> 00:00:07,740
Como podemos gerar uma matriz de dados como elementos J ou X?

2
00:00:08,280 --> 00:00:10,200
Bem, na verdade é relativamente trivial.

3
00:00:10,740 --> 00:00:19,500
Vamos mapear essa matriz de tarefas, objetos para uma matriz de J. S. X elementos porque o REACT é capaz de

4
00:00:19,560 --> 00:00:21,960
gerar uma matriz de elementos JavaScript.

5
00:00:22,450 --> 00:00:23,730
Para isso, deixe-me mostrar como isso funciona.

6
00:00:23,760 --> 00:00:28,170
Vamos usar esses chavetas simples, porque quero adicionar uma expressão JavaScript aqui.

7
00:00:28,500 --> 00:00:33,090
Na minha expressão, aqui está uma matriz simples, mas uma matriz de itens da lista.

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

9
00:00:35,560 --> 00:00:36,510
E depois outro.

10
00:00:36,940 --> 00:00:44,680
Isso funciona, eu produzo isso no meu código J é X com chaves simples, porque este ano é claro que não é J é X,

11
00:00:44,680 --> 00:00:48,700
é uma matriz, mas é uma matriz cheia de J é X.

12
00:00:49,030 --> 00:00:52,150
E se eu tiver segurança, ela sai alta e isso funciona.

13
00:00:52,300 --> 00:00:54,880
Temos um erro ou um aviso que você pode ignorar por enquanto.

14
00:00:55,210 --> 00:00:56,710
Mas isso funciona em geral.

15
00:00:57,430 --> 00:01:04,390
Agora, como isso funciona com dados codificados, também podemos gerar nossa matriz de objetivos para gerar

16
00:01:04,390 --> 00:01:05,470
objetivos aqui.

17
00:01:05,860 --> 00:01:12,490
Mas o problema é que o objetivo de props é, no final, uma matriz de objetos JavaScript, não uma matriz de J.

18
00:01:12,490 --> 00:01:13,030
Código ASICs.

19
00:01:13,840 --> 00:01:15,400
Então, se tentarmos produzir este ano.

20
00:01:16,400 --> 00:01:17,300
Isso irá falhar.

21
00:01:17,540 --> 00:01:21,210
Diz a você que os objetos não são válidos como reagir filho.

22
00:01:21,450 --> 00:01:22,460
Considerando que temos filhos.

23
00:01:22,760 --> 00:01:28,210
Portanto, no final, não podemos gerar objetos JavaScript simples baunilhados em J é X.

24
00:01:28,730 --> 00:01:34,390
Em vez disso, precisamos mapear todos os objetos em um J como equivalente a X.

25
00:01:34,490 --> 00:01:36,860
Então, em um elemento renovável.

26
00:01:37,520 --> 00:01:41,210
Então, aqui, queremos mapear todos os objetos em um item da lista no final.

27
00:01:42,050 --> 00:01:44,180
Assim, adereços objetivos, que é uma matriz.

28
00:01:44,660 --> 00:01:46,370
Podemos chamar o método map.

29
00:01:46,580 --> 00:01:50,450
Esse é um método JavaScript padrão que existe em qualquer matriz.

30
00:01:50,840 --> 00:01:53,300
O método do mapa assume uma função.

31
00:01:54,110 --> 00:01:59,400
Aqui, eu passo uma função de seta que é executada em todos os elementos da matriz.

32
00:01:59,450 --> 00:02:04,220
Você chama o mapa e então a disfunção retornará.

33
00:02:04,630 --> 00:02:10,630
Transforme as palavras desse elemento na matriz original e o mapa geral retornará uma nova matriz

34
00:02:10,730 --> 00:02:13,100
cheia dessas partes de dados transformadas.

35
00:02:13,910 --> 00:02:17,810
Portanto, esta função receberá o elemento existente aqui.

36
00:02:17,900 --> 00:02:22,490
Portanto, todos os objetivos de nossos objetivos são organizados e, em seguida, retornam um novo elemento.

37
00:02:23,150 --> 00:02:28,010
Portanto, nesta nova matriz, retorne pelo mapa, quero ter um monte de J com X elementos.

38
00:02:28,100 --> 00:02:30,830
Então, aqui, retornarei apenas um item da lista.

39
00:02:31,850 --> 00:02:33,320
Qual é ela é ex, é claro.

40
00:02:35,100 --> 00:02:41,730
E o item da lista, eu quero exibir meu texto dourado, não há objetivo aqui, o objeto JavaScript que temos em sua

41
00:02:41,730 --> 00:02:46,770
matriz original, porque essa função é executada em todos os elementos da matriz original e fornece

42
00:02:46,770 --> 00:02:51,240
o objeto na taxa original ou nos dados peça na matriz original como argumento.

43
00:02:51,600 --> 00:02:54,630
Então, o objetivo aqui é esse objeto, que parece este ano.

44
00:02:56,010 --> 00:02:57,660
Então, eu estou interessado apenas no texto aqui.

45
00:02:57,900 --> 00:03:02,150
E, novamente, podemos produzir o texto produzindo uma expressão JavaScript aqui.

46
00:03:02,340 --> 00:03:07,970
Portanto, precisamos usar chaves em nosso código J é X aqui e temos o texto do ponto da meta aqui.

47
00:03:09,010 --> 00:03:12,670
Minha expressão é que eu acesso à propriedade text no objeto gold.

48
00:03:13,540 --> 00:03:21,250
Então agora o que acontece aqui é que mapeio minha matriz de objetos JavaScript simples para uma matriz de elementos J is X, e

49
00:03:21,490 --> 00:03:25,630
uma matriz de G. S. Elementos X é renderizar fatura, como você aprendeu.

50
00:03:27,780 --> 00:03:28,950
Agora, enfrente a segurança.

51
00:03:30,600 --> 00:03:33,060
Veja bem, isso supera minhas habilidades principais novamente.

52
00:03:33,810 --> 00:03:40,250
Agora também recebemos um aviso sobre uma chave exclusiva que está relacionada a como a reação renderiza o DOM e que ela

53
00:03:40,290 --> 00:03:42,180
deseja fazer isso de forma eficiente.

54
00:03:42,450 --> 00:03:45,030
Você aprende mais sobre isso no meu React, o curso completo do guia.

55
00:03:45,360 --> 00:03:51,330
E, portanto, sempre que você produzir listas de dados com essa técnica, você precisará adicionar um suporte especial

56
00:03:51,570 --> 00:03:54,600
a cada item que estiver renderizando na lista.

57
00:03:54,630 --> 00:03:56,010
Nesse caso, para cada item da lista.

58
00:03:56,390 --> 00:04:00,390
E esse é o suporte principal que é um suporte que o próprio reagir entende.

59
00:04:00,690 --> 00:04:03,120
E aqui eu quero gerar o objetivo I. D. novamente.

60
00:04:03,280 --> 00:04:04,480
Embrulhado em chaves.

61
00:04:04,500 --> 00:04:06,810
Porque esta é uma expressão JavaScript regular.

62
00:04:08,350 --> 00:04:11,740
Portanto, agora com o pai, não recebemos o aviso e temos as metas do curso.

63
00:04:12,130 --> 00:04:14,380
Então é assim que produzimos uma lista de dados.

64
00:04:16,400 --> 00:04:18,650
Com isso, isso parece muito bom.

65
00:04:18,680 --> 00:04:20,150
Estamos exibindo nossa lista de dados.

66
00:04:20,300 --> 00:04:26,000
Por que não trabalhamos agora para adicionar algumas funcionalidades que nos permitem adicionar nossos próprios objetivos?

67
00:04:26,300 --> 00:04:27,920
Esse seria um bom próximo passo.