Ahora, antes de terminar este módulo, regresemos a algunas listas y a algún contenido desplazable porque en esta aplicación, no
tenemos tal contenido en absoluto y,
de hecho, es crucial que comprenda cómo trabajar con listas y cuáles son algunas de
las peculiaridades
especiales son cuando se trata de listas. Digamos aquí que queremos registrar las conjeturas
anteriores que hizo la computadora, queremos registrarlas aquí debajo de nuestro botón más y menos en este espacio vacío aquí.
Para eso, por supuesto, necesitamos registrar cualquier suposición hecha por la computadora y luego mostrarla en la lista.
Entonces, en la pantalla del juego, comencemos por registrar eso.
Actualmente solo estamos contando rondas aquí, sin
embargo, el objetivo debe ser que no solo contamos rondas, sino que también hayamos guardado las rondas,
por lo que hemos guardado una suposición que se hizo
en cada ronda y lograr eso aquí en nuestras rondas Sin embargo, podemos simplemente administrar una matriz en lugar de un número
y nombraré estas conjeturas pasadas para tener muy claro lo que hay allí
y, por lo tanto, esto se llama conjeturas pasadas establecidas.
Entonces, el objetivo es agregar una nueva suposición aquí a esta matriz cada vez que generamos un nuevo número aleatorio,
así que aquí en el siguiente controlador de suposiciones. Allí donde establecemos las rondas, en lugar
de establecer rondas como esta que ya no administramos, tenemos que
establecer nuestras conjeturas pasadas y allí debemos usar nuestras conjeturas anteriores y agregar una nueva conjetura aquí.
Ahora para eso, podemos usar ese formulario de función aquí donde obtenemos curPastGuesses, que es un nombre un poco
extraño, pero que simplemente significa que este es nuestro estado actual y queremos actualizarlo
o es nuestro último estado para ser precisos y nosotros queremos actualizar eso y queremos actualizarlo devolviendo una nueva
matriz que será nuestro nuevo estado y que, por supuesto, debería tener en cuenta nuestras
conjeturas pasadas actuales y luego agregar nuevas conjeturas allí.
Ahora podemos agregar una nueva suposición al final de esa lista o al principio y, de hecho, la agregaré
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
la pantalla .
Entonces, aquí, podemos agregar el siguiente número, que es nuestra nueva suposición actual que estamos generando aquí y
eso es lo que tenemos que agregar aquí como elemento, ¿verdad? Con eso, estamos agregando nuevos elementos a esta matriz con cada suposición.
Ahora no olvide que también comenzamos con una suposición,
generamos una suposición inicial aquí, quiero comenzar
con esa suposición en la lista y, por lo tanto, tenemos que agregarla a la lista
aquí, así que la extraeré desde nuestra función de estado de uso, llame aquí y cree una nueva suposición inicial constante
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
la suposición inicial que agrego como primer elemento a esa matriz en nuestras conjeturas pasadas, use la
inicialización de estado.
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
procesar, pero la forma en que funciona el estado de uso es tal que React detecta que un estado para este componente ya
se ha
inicializado, por lo que solo establecerá el declare esta suposición inicial por primera vez que este componente se representa y
no para representaciones posteriores. De hecho,
esta suposición inicial se recreará, pero en realidad no se usará debido a ese manejo
de estado separado donde React descubre que ya tenemos un estado.
Entonces con eso, estamos inicializando esto, también estamos inicializando nuestra suposición aquí en esa lista y estamos agregando una nueva
suposición a la lista en la parte inferior aquí. Con todo eso, deberíamos tener algunas
conjeturas pasadas que podemos generar en una lista y ahora
tenemos dos formas de generar esto, con una FlatList o con la vista de desplazamiento y comenzaré
nuevamente con una vista de desplazamiento para eso.
Entonces, aquí debajo de la tarjeta, agregaré una vista de desplazamiento y para eso, debe importar la vista de desplazamiento de React
Native,
así que hagamos eso aquí,
vista de desplazamiento, impórtelo de React Native y envíe eso debajo de la lista para
que este es un contenido desplazable porque allí
tendré mi contenido dinámico, usaré mis conjeturas anteriores y lo mapearé en una lista de componentes.
Entonces, aquí tendré que adivinar
individualmente, por ejemplo, y esto debería devolver un componente dentro de esta función de mapa
y dicho componente de conjetura podría ser una vista, digamos, con un texto allí donde simplemente genero la
conjetura, así que aquí presento esta conjetura que estoy obteniendo y dado que solo agrego mis conjeturas aquí directamente a la matriz,
la conjetura que tengo allí es solo el número de conjetura y simplemente puedo generarlo aquí.
Ahora aprendió que para los elementos que estamos mapeando de esta manera, también necesita agregar una clave y podríamos
usar nuestra suposición aquí como una clave si se garantiza
que seremos únicos, pero con nuestra lógica actual, en realidad no lo es porque en nuestra lógica actual, generar aleatorio
entre en realidad genera un nuevo número aleatorio donde el límite superior, este valor alto aquí, está excluido pero el límite
inferior está incluido, por lo que podemos obtener este límite inferior como un nuevo valor aleatorio.
Ahora, la desventaja de esto es que aquí, donde estamos estableciendo nuestro nuevo límite inferior, estamos configurando esto en la suposición
actual, lo que significa que esto puede repetirse en un número aleatorio futuro y en realidad lo vimos también en
este módulo, a
veces allí , la computadora adivina un número que ya se había adivinado un par de vueltas antes.
No es un gran problema, pero ahora es porque ahora necesitamos que nuestra conjetura esté garantizada, que sea
única y que la solución sea simple, simplemente podemos agregar uno aquí cuando establecemos nuestro nuevo límite inferior porque al
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
más alto que la suposición actual que era falsa, de lo contrario
no habríamos llegado aquí.
Así que ahora estamos estableciendo un nuevo límite inferior que se puede generar en el futuro pero que no
generamos antes.
Entonces, esta es una pequeña solución en la lógica que
no hace daño de ninguna manera y es especialmente importante si planea usar la suposición como una clave única aquí.
Entonces con eso,
veamos si eso funciona.
Vamos a guardar eso y probarlo aquí en iOS,
iniciar el
juego y vemos nuestra suposición inicial, 57, no está
bien formateado pero lo vemos aquí. Ahora 57 es demasiado alto, si digo más bajo,
vemos la nueva suposición en la parte superior de la lista y mentí allí y eso parece funcionar.
Ahora, por supuesto, recibimos un error cuando el juego termina porque allí, estamos tratando de obtener nuestras rondas y ya
no lo manejamos como un estado. Así que tendremos que arreglar
eso, pero la salida de la lista funciona.
Ahora arreglemos el error de nuestras rondas
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
le tomó a la computadora adivinar nuestro número.
Anteriormente teníamos una variable de rondas aquí, un estado de ronda, ahora solo
tenemos conjeturas pasadas que es una matriz, por lo que no podemos reenviar conjeturas pasadas como esta porque al final
del juego necesita un número,
pero por supuesto podemos reenviar el longitud de conjeturas pasadas, que es solo la cantidad de rondas que le tomó
a la computadora.
Entonces con eso, si hacemos esto, ahora también deberíamos poder terminar el juego con éxito.
Si intentamos esto rápidamente y resolvemos el juego, sí,
eso funciona.
Así que ahora tenemos eso funcionando, ahora
volvamos la cabeza hacia esa vista de desplazamiento y los elementos de la lista allí nuevamente
y asegurémonos de que tengamos el estilo correcto allí.