1 00:00:02,310 --> 00:00:10,050 Ahora, antes de terminar este módulo, regresemos a algunas listas y a algún contenido desplazable porque en esta aplicación, no 2 00:00:10,050 --> 00:00:12,670 tenemos tal contenido en absoluto y, 3 00:00:12,690 --> 00:00:18,570 de hecho, es crucial que comprenda cómo trabajar con listas y cuáles son algunas de 4 00:00:18,570 --> 00:00:19,920 las peculiaridades 5 00:00:19,920 --> 00:00:25,380 especiales son cuando se trata de listas. Digamos aquí que queremos registrar las conjeturas 6 00:00:25,380 --> 00:00:32,060 anteriores que hizo la computadora, queremos registrarlas aquí debajo de nuestro botón más y menos en este espacio vacío aquí. 7 00:00:32,310 --> 00:00:38,910 Para eso, por supuesto, necesitamos registrar cualquier suposición hecha por la computadora y luego mostrarla en la lista. 8 00:00:38,910 --> 00:00:41,880 Entonces, en la pantalla del juego, comencemos por registrar eso. 9 00:00:41,970 --> 00:00:44,610 Actualmente solo estamos contando rondas aquí, sin 10 00:00:44,610 --> 00:00:49,620 embargo, el objetivo debe ser que no solo contamos rondas, sino que también hayamos guardado las rondas, 11 00:00:49,650 --> 00:00:52,770 por lo que hemos guardado una suposición que se hizo 12 00:00:52,920 --> 00:00:59,520 en cada ronda y lograr eso aquí en nuestras rondas Sin embargo, podemos simplemente administrar una matriz en lugar de un número 13 00:00:59,520 --> 00:01:03,510 y nombraré estas conjeturas pasadas para tener muy claro lo que hay allí 14 00:01:03,690 --> 00:01:06,690 y, por lo tanto, esto se llama conjeturas pasadas establecidas. 15 00:01:06,690 --> 00:01:13,390 Entonces, el objetivo es agregar una nueva suposición aquí a esta matriz cada vez que generamos un nuevo número aleatorio, 16 00:01:13,390 --> 00:01:19,530 así que aquí en el siguiente controlador de suposiciones. Allí donde establecemos las rondas, en lugar 17 00:01:19,560 --> 00:01:23,660 de establecer rondas como esta que ya no administramos, tenemos que 18 00:01:23,790 --> 00:01:30,420 establecer nuestras conjeturas pasadas y allí debemos usar nuestras conjeturas anteriores y agregar una nueva conjetura aquí. 19 00:01:30,420 --> 00:01:37,540 Ahora para eso, podemos usar ese formulario de función aquí donde obtenemos curPastGuesses, que es un nombre un poco 20 00:01:37,540 --> 00:01:42,790 extraño, pero que simplemente significa que este es nuestro estado actual y queremos actualizarlo 21 00:01:42,790 --> 00:01:49,810 o es nuestro último estado para ser precisos y nosotros queremos actualizar eso y queremos actualizarlo devolviendo una nueva 22 00:01:50,020 --> 00:01:55,720 matriz que será nuestro nuevo estado y que, por supuesto, debería tener en cuenta nuestras 23 00:01:56,020 --> 00:01:59,680 conjeturas pasadas actuales y luego agregar nuevas conjeturas allí. 24 00:01:59,690 --> 00:02:04,280 Ahora podemos agregar una nueva suposición al final de esa lista o al principio y, de hecho, la agregaré 25 00:02:04,280 --> 00:02:09,590 al principio para que nuestra suposición más reciente esté siempre en la parte superior de la lista cuando más tarde la visualicemos en 26 00:02:09,590 --> 00:02:10,520 la pantalla . 27 00:02:11,210 --> 00:02:17,600 Entonces, aquí, podemos agregar el siguiente número, que es nuestra nueva suposición actual que estamos generando aquí y 28 00:02:17,600 --> 00:02:25,440 eso es lo que tenemos que agregar aquí como elemento, ¿verdad? Con eso, estamos agregando nuevos elementos a esta matriz con cada suposición. 29 00:02:25,470 --> 00:02:28,760 Ahora no olvide que también comenzamos con una suposición, 30 00:02:28,770 --> 00:02:31,290 generamos una suposición inicial aquí, quiero comenzar 31 00:02:31,290 --> 00:02:36,670 con esa suposición en la lista y, por lo tanto, tenemos que agregarla a la lista 32 00:02:36,720 --> 00:02:44,040 aquí, así que la extraeré desde nuestra función de estado de uso, llame aquí y cree una nueva suposición inicial constante 33 00:02:44,040 --> 00:02:51,910 que es este número generado aleatoriamente y ahora es esta suposición inicial la que agrego aquí para usar el estado y también es 34 00:02:51,910 --> 00:02:57,850 la suposición inicial que agrego como primer elemento a esa matriz en nuestras conjeturas pasadas, use la 35 00:02:57,850 --> 00:02:59,200 inicialización de estado. 36 00:02:59,200 --> 00:03:06,260 Ahora, no olvide ese estado de uso, ya que todo este código aquí, por supuesto, se vuelve a ejecutar cada vez que este componente se vuelve a 37 00:03:06,340 --> 00:03:12,670 procesar, pero la forma en que funciona el estado de uso es tal que React detecta que un estado para este componente ya 38 00:03:12,670 --> 00:03:13,350 se ha 39 00:03:13,780 --> 00:03:19,210 inicializado, por lo que solo establecerá el declare esta suposición inicial por primera vez que este componente se representa y 40 00:03:19,210 --> 00:03:21,400 no para representaciones posteriores. De hecho, 41 00:03:21,400 --> 00:03:28,120 esta suposición inicial se recreará, pero en realidad no se usará debido a ese manejo 42 00:03:28,210 --> 00:03:33,060 de estado separado donde React descubre que ya tenemos un estado. 43 00:03:33,070 --> 00:03:38,080 Entonces con eso, estamos inicializando esto, también estamos inicializando nuestra suposición aquí en esa lista y estamos agregando una nueva 44 00:03:38,380 --> 00:03:43,090 suposición a la lista en la parte inferior aquí. Con todo eso, deberíamos tener algunas 45 00:03:43,240 --> 00:03:46,480 conjeturas pasadas que podemos generar en una lista y ahora 46 00:03:46,780 --> 00:03:52,300 tenemos dos formas de generar esto, con una FlatList o con la vista de desplazamiento y comenzaré 47 00:03:52,300 --> 00:03:54,660 nuevamente con una vista de desplazamiento para eso. 48 00:03:54,730 --> 00:04:02,320 Entonces, aquí debajo de la tarjeta, agregaré una vista de desplazamiento y para eso, debe importar la vista de desplazamiento de React 49 00:04:02,320 --> 00:04:02,890 Native, 50 00:04:03,010 --> 00:04:04,820 así que hagamos eso aquí, 51 00:04:04,870 --> 00:04:10,060 vista de desplazamiento, impórtelo de React Native y envíe eso debajo de la lista para 52 00:04:10,420 --> 00:04:13,190 que este es un contenido desplazable porque allí 53 00:04:13,210 --> 00:04:18,620 tendré mi contenido dinámico, usaré mis conjeturas anteriores y lo mapearé en una lista de componentes. 54 00:04:18,640 --> 00:04:20,550 Entonces, aquí tendré que adivinar 55 00:04:20,560 --> 00:04:26,140 individualmente, por ejemplo, y esto debería devolver un componente dentro de esta función de mapa 56 00:04:26,140 --> 00:04:32,350 y dicho componente de conjetura podría ser una vista, digamos, con un texto allí donde simplemente genero la 57 00:04:32,350 --> 00:04:39,880 conjetura, así que aquí presento esta conjetura que estoy obteniendo y dado que solo agrego mis conjeturas aquí directamente a la matriz, 58 00:04:39,880 --> 00:04:45,670 la conjetura que tengo allí es solo el número de conjetura y simplemente puedo generarlo aquí. 59 00:04:47,150 --> 00:04:53,600 Ahora aprendió que para los elementos que estamos mapeando de esta manera, también necesita agregar una clave y podríamos 60 00:04:53,600 --> 00:04:57,340 usar nuestra suposición aquí como una clave si se garantiza 61 00:04:57,350 --> 00:05:04,010 que seremos únicos, pero con nuestra lógica actual, en realidad no lo es porque en nuestra lógica actual, generar aleatorio 62 00:05:04,010 --> 00:05:11,300 entre en realidad genera un nuevo número aleatorio donde el límite superior, este valor alto aquí, está excluido pero el límite 63 00:05:11,300 --> 00:05:17,190 inferior está incluido, por lo que podemos obtener este límite inferior como un nuevo valor aleatorio. 64 00:05:17,300 --> 00:05:23,660 Ahora, la desventaja de esto es que aquí, donde estamos estableciendo nuestro nuevo límite inferior, estamos configurando esto en la suposición 65 00:05:23,660 --> 00:05:30,020 actual, lo que significa que esto puede repetirse en un número aleatorio futuro y en realidad lo vimos también en 66 00:05:30,020 --> 00:05:31,120 este módulo, a 67 00:05:31,130 --> 00:05:37,010 veces allí , la computadora adivina un número que ya se había adivinado un par de vueltas antes. 68 00:05:37,070 --> 00:05:42,900 No es un gran problema, pero ahora es porque ahora necesitamos que nuestra conjetura esté garantizada, que sea 69 00:05:43,190 --> 00:05:49,460 única y que la solución sea simple, simplemente podemos agregar uno aquí cuando establecemos nuestro nuevo límite inferior porque al 70 00:05:49,460 --> 00:05:56,930 agregar uno aquí, nos aseguramos que el nuevo límite inferior que se incluye en la generación de números aleatorios es en realidad uno 71 00:05:57,410 --> 00:06:01,270 más alto que la suposición actual que era falsa, de lo contrario 72 00:06:01,280 --> 00:06:02,910 no habríamos llegado aquí. 73 00:06:02,930 --> 00:06:09,020 Así que ahora estamos estableciendo un nuevo límite inferior que se puede generar en el futuro pero que no 74 00:06:09,020 --> 00:06:09,950 generamos antes. 75 00:06:09,950 --> 00:06:13,100 Entonces, esta es una pequeña solución en la lógica que 76 00:06:13,100 --> 00:06:18,560 no hace daño de ninguna manera y es especialmente importante si planea usar la suposición como una clave única aquí. 77 00:06:18,640 --> 00:06:20,110 Entonces con eso, 78 00:06:20,110 --> 00:06:21,670 veamos si eso funciona. 79 00:06:21,730 --> 00:06:26,190 Vamos a guardar eso y probarlo aquí en iOS, 80 00:06:26,190 --> 00:06:27,610 iniciar el 81 00:06:27,750 --> 00:06:31,830 juego y vemos nuestra suposición inicial, 57, no está 82 00:06:31,830 --> 00:06:37,890 bien formateado pero lo vemos aquí. Ahora 57 es demasiado alto, si digo más bajo, 83 00:06:37,920 --> 00:06:43,670 vemos la nueva suposición en la parte superior de la lista y mentí allí y eso parece funcionar. 84 00:06:43,740 --> 00:06:49,470 Ahora, por supuesto, recibimos un error cuando el juego termina porque allí, estamos tratando de obtener nuestras rondas y ya 85 00:06:49,980 --> 00:06:53,730 no lo manejamos como un estado. Así que tendremos que arreglar 86 00:06:53,910 --> 00:06:56,590 eso, pero la salida de la lista funciona. 87 00:06:56,670 --> 00:06:59,140 Ahora arreglemos el error de nuestras rondas 88 00:06:59,160 --> 00:07:08,580 que estamos obteniendo, eso simplemente proviene de useEffect, donde reenvío las rondas a onGameOver. Allí, al final, necesito reenviar el número de rondas que 89 00:07:08,580 --> 00:07:13,120 le tomó a la computadora adivinar nuestro número. 90 00:07:13,140 --> 00:07:17,030 Anteriormente teníamos una variable de rondas aquí, un estado de ronda, ahora solo 91 00:07:17,040 --> 00:07:23,010 tenemos conjeturas pasadas que es una matriz, por lo que no podemos reenviar conjeturas pasadas como esta porque al final 92 00:07:23,040 --> 00:07:24,660 del juego necesita un número, 93 00:07:24,660 --> 00:07:30,440 pero por supuesto podemos reenviar el longitud de conjeturas pasadas, que es solo la cantidad de rondas que le tomó 94 00:07:30,450 --> 00:07:31,520 a la computadora. 95 00:07:31,530 --> 00:07:37,920 Entonces con eso, si hacemos esto, ahora también deberíamos poder terminar el juego con éxito. 96 00:07:37,980 --> 00:07:43,440 Si intentamos esto rápidamente y resolvemos el juego, sí, 97 00:07:43,440 --> 00:07:44,900 eso funciona. 98 00:07:45,030 --> 00:07:47,340 Así que ahora tenemos eso funcionando, ahora 99 00:07:47,340 --> 00:07:51,750 volvamos la cabeza hacia esa vista de desplazamiento y los elementos de la lista allí nuevamente 100 00:07:51,750 --> 00:07:54,210 y asegurémonos de que tengamos el estilo correcto allí.