1 00:00:02,070 --> 00:00:07,740 ¿Cómo podemos generar una matriz de datos como J como elementos X? 2 00:00:08,280 --> 00:00:10,200 Bueno, en realidad es relativamente trivial. 3 00:00:10,740 --> 00:00:19,500 Vamos a mapear este conjunto de trabajos, objetos a un conjunto de J. S. Elementos X porque REACT es capaz de generar 4 00:00:19,560 --> 00:00:21,960 una matriz de elementos JavaScript. 5 00:00:22,450 --> 00:00:23,730 Para eso, déjame mostrarte cómo funciona esto. 6 00:00:23,760 --> 00:00:28,170 Usemos estas llaves simples, porque quiero agregar una expresión de JavaScript aquí. 7 00:00:28,500 --> 00:00:33,090 En mi expresión, aquí hay una matriz simple, pero una matriz de elementos de la lista. 8 00:00:33,270 --> 00:00:33,900 Hola. 9 00:00:35,560 --> 00:00:36,510 Y luego otro. 10 00:00:36,940 --> 00:00:44,680 Esto funciona, imprimí esto en mi código J es X con llaves simples porque este año, por supuesto, no es J es X, es 11 00:00:44,680 --> 00:00:48,700 una matriz, pero es una matriz llena de J es X. 12 00:00:49,030 --> 00:00:52,150 Y si protejo, sale alto y esto funciona. 13 00:00:52,300 --> 00:00:54,880 Recibimos un error o una advertencia que puede ignorar por ahora. 14 00:00:55,210 --> 00:00:56,710 Pero esto funciona en general. 15 00:00:57,430 --> 00:01:04,390 Ahora, dado que esto funciona con datos codificados, también podemos generar nuestra variedad de objetivos para que podamos generar objetivos 16 00:01:04,390 --> 00:01:05,470 de accesorios aquí. 17 00:01:05,860 --> 00:01:12,490 Pero el problema es que los objetivos de los apoyos son al final una matriz de objetos JavaScript, no una matriz de J. 18 00:01:12,490 --> 00:01:13,030 Código ASIC 19 00:01:13,840 --> 00:01:15,400 Entonces, si tratamos de producir este año. 20 00:01:16,400 --> 00:01:17,300 Fallará. 21 00:01:17,540 --> 00:01:21,210 Te dice que los objetos no son válidos como react child. 22 00:01:21,450 --> 00:01:22,460 Mientras que tenemos hijos. 23 00:01:22,760 --> 00:01:28,210 Entonces, al final, no podemos generar objetos JavaScript simples de vainilla en J es X. 24 00:01:28,730 --> 00:01:34,390 En cambio, necesitamos mapear cada objeto en una J como X equivalente. 25 00:01:34,490 --> 00:01:36,860 Así en un elemento renovable. 26 00:01:37,520 --> 00:01:41,210 Así que aquí queremos mapear cada objeto en un elemento de la lista al final. 27 00:01:42,050 --> 00:01:44,180 Entonces, en los objetivos de utilería, que es una matriz. 28 00:01:44,660 --> 00:01:46,370 Podemos llamar al método del mapa. 29 00:01:46,580 --> 00:01:50,450 Ese es un método predeterminado de JavaScript vainilla que existe en cualquier matriz. 30 00:01:50,840 --> 00:01:53,300 El método del mapa toma una función. 31 00:01:54,110 --> 00:01:59,400 Aquí, pasaré una función de flecha que se ejecuta en cada elemento de la matriz. 32 00:01:59,450 --> 00:02:04,220 Llamas al mapa y luego la disfunción aquí volverá. 33 00:02:04,630 --> 00:02:10,630 Transforme las palabras de ese elemento en la matriz original y el mapa general devolverá una nueva matriz 34 00:02:10,730 --> 00:02:13,100 llena de estas piezas de datos transformadas. 35 00:02:13,910 --> 00:02:17,810 Por lo tanto, esta función recibirá el elemento existente aquí. 36 00:02:17,900 --> 00:02:22,490 Entonces, cada objetivo en nuestra matriz de objetivos y luego devuelve un nuevo elemento. 37 00:02:23,150 --> 00:02:28,010 Entonces, en esta nueva matriz, regrese por mapa, quiero tener un montón de elementos J tiene X. 38 00:02:28,100 --> 00:02:30,830 Así que aquí solo devolveré un elemento de la lista. 39 00:02:31,850 --> 00:02:33,320 Que es ella es ex, por supuesto. 40 00:02:35,100 --> 00:02:41,730 Y el elemento de la lista, quiero generar mi texto dorado, no hay objetivo aquí es ese objeto JavaScript que tenemos en su matriz 41 00:02:41,730 --> 00:02:46,770 original, porque esta función se ejecuta en cada elemento de la matriz original y le da el 42 00:02:46,770 --> 00:02:51,240 objeto en la tasa original o los datos pieza en la matriz original como argumento. 43 00:02:51,600 --> 00:02:54,630 Así que el objetivo aquí es ese objeto, que se parece a este año. 44 00:02:56,010 --> 00:02:57,660 Así que solo me interesa el texto aquí. 45 00:02:57,900 --> 00:03:02,150 Y nuevamente, podemos generar el texto generando una expresión de JavaScript aquí. 46 00:03:02,340 --> 00:03:07,970 Por lo tanto, necesitamos llaves en nuestro código J es X aquí y tenemos texto de punto objetivo aquí. 47 00:03:09,010 --> 00:03:12,670 Mi expresión es que accedo a la propiedad de texto en el objeto de oro. 48 00:03:13,540 --> 00:03:21,250 Entonces, lo que sucede aquí es que mapeo mi conjunto de objetos JavaScript simples a un conjunto de elementos J y X, y 49 00:03:21,490 --> 00:03:25,630 tal conjunto de G. S. X elementos es render bill, como aprendiste. 50 00:03:27,780 --> 00:03:28,950 Ahora, enfréntate a la seguridad. 51 00:03:30,600 --> 00:03:33,060 Verás, esto supera mis habilidades básicas nuevamente. 52 00:03:33,810 --> 00:03:40,250 Ahora también recibimos una advertencia sobre una clave única que está relacionada con la forma en que reacciona el DOM y 53 00:03:40,290 --> 00:03:42,180 que quiere hacerlo de manera eficiente. 54 00:03:42,450 --> 00:03:45,030 Aprende más sobre eso en mi React, el curso guía completo. 55 00:03:45,360 --> 00:03:51,330 Y, por lo tanto, cuando genera listas de datos con esta técnica, debe agregar un accesorio especial a 56 00:03:51,570 --> 00:03:54,600 cada elemento que está representando en la lista. 57 00:03:54,630 --> 00:03:56,010 En este caso, a cada elemento de la lista. 58 00:03:56,390 --> 00:04:00,390 Y ese es el accesorio clave que es un accesorio que reacciona. 59 00:04:00,690 --> 00:04:03,120 Y aquí quiero obtener el objetivo I. RE. de nuevo. 60 00:04:03,280 --> 00:04:04,480 Envuelto en llaves. 61 00:04:04,500 --> 00:04:06,810 Porque esta es una expresión regular de JavaScript. 62 00:04:08,350 --> 00:04:11,740 Así que ahora con papá, no recibimos la advertencia y nuestros objetivos del curso. 63 00:04:12,130 --> 00:04:14,380 Así es como sacamos una lista de datos. 64 00:04:16,400 --> 00:04:18,650 Con eso, esto se ve bastante bien. 65 00:04:18,680 --> 00:04:20,150 Estamos enviando nuestra lista de datos. 66 00:04:20,300 --> 00:04:26,000 ¿Por qué no trabajamos ahora para agregar alguna funcionalidad que nos permita agregar nuestros propios objetivos? 67 00:04:26,300 --> 00:04:27,920 Ese sería un buen próximo paso.