Maintenant, avant de terminer ce module, revenons à certaines listes et à un certain contenu défilant car dans cette application, nous
n'avons aucun contenu de ce type et
en fait, il est crucial pour vous de comprendre comment travailler avec des listes et ce
que certains des
bizarreries spéciales sont quand il s'agit de listes. Alors disons ici que nous voulons enregistrer les suppositions
précédentes faites par l'ordinateur, nous voulons enregistrer cela ici en dessous de notre bouton plus et moins dans cet espace vide blanc ici.
Pour cela, nous devons bien sûr enregistrer toutes les suppositions faites par l'ordinateur, puis les afficher dans la liste.
Donc, dans l'écran de jeu, commençons par l'enregistrer.
Actuellement, nous ne comptons que les tours ici,
l'objectif doit cependant être que nous ne comptions pas seulement les tours, mais que nous ayons également enregistré
les tours, nous avons donc enregistré une supposition qui a été
faite à chaque tour et pour y parvenir ici dans nos tours. état, nous pouvons simplement gérer un tableau au lieu d'un nombre et
je vais nommer ces suppositions passées pour être vraiment clair sur ce qu'il y
a dedans et cela est donc nommé définir les suppositions passées.
Alors maintenant, le but est d'ajouter une nouvelle supposition ici à ce tableau chaque fois que nous générons un nouveau nombre
aléatoire, donc ici dans le prochain gestionnaire de suppositions. Là où nous avons défini les tours, au
lieu de définir des tours comme celui-ci que nous ne gérons plus, nous
devons définir nos suppositions passées et là, nous devons utiliser nos suppositions précédentes et en fait ajouter une nouvelle supposition ici.
Maintenant, pour cela, nous pouvons utiliser cette forme de fonction ici où nous obtenons les curPastGuesses qui est un peu un nom étrange
mais qui signifie simplement que c'est notre état actuel et nous voulons le mettre à jour
ou c'est notre dernier état pour être précis et nous voulons mettre à jour cela et nous voulons le mettre à jour
en renvoyant un nouveau tableau qui sera notre nouvel état et qui bien sûr devrait prendre en compte
nos suppositions passées actuelles, puis y ajouter de nouvelles suppositions.
Maintenant, nous pouvons ajouter une nouvelle supposition à la fin de cette liste ou au début et je
vais l'ajouter au début afin que notre dernière supposition soit toujours en haut de la liste lorsque nous la rendrons plus tard
à l'écran .
Donc ici, nous pouvons ajouter le numéro suivant qui est notre nouvelle estimation actuelle que nous générons ici et
c'est ce que nous devons ajouter ici en tant qu'élément, non? Avec cela, nous ajoutons de nouveaux éléments à ce tableau à chaque supposition.
Maintenant, n'oubliez pas que nous commençons également par une
supposition, nous générons une supposition initiale ici,
je veux commencer par cette supposition dans la liste et donc, nous devons l'ajouter à
la liste ici, donc je vais l'extraire à partir de notre fonction use state appeler ici et créer une nouvelle constante,
supposition initiale qui est ce nombre généré de façon aléatoire et maintenant c'est cette supposition initiale que j'ajoute ici pour utiliser state et
c'est aussi la supposition initiale que j'ajoute comme premier élément à ce tableau dans nos suppositions passées,
utilisez l'initialisation d'état.
Maintenant, n'oubliez pas que l'état d'utilisation car tout ce code est ici réexécuté bien sûr chaque fois que ce composant est rendu à nouveau, mais
la façon dont fonctionne l'état est telle que React détecte qu'un état pour ce composant a déjà été initialisé, il ne définira
donc
que le indiquer cette supposition initiale pour la toute première fois que ce composant effectue le rendu et non
pour les rendus suivants. Là, en
effet, cette supposition initiale sera recréée, mais elle ne sera pas réellement utilisée en raison de la
gestion de l'état détaché où React découvre que nous avons déjà un état.
Donc, avec cela, nous initialisons ceci, nous initialisons également notre supposition ici dans cette liste et nous ajoutons une
nouvelle supposition à la liste en bas ici. Avec tout cela, nous devrions avoir
des suppositions passées que nous pouvons afficher dans une liste et
maintenant nous avons deux façons de produire cela, avec une FlatList ou avec la vue de défilement et je
recommencerai avec une vue de défilement pour cela.
Donc, ici en dessous de la carte, je vais ajouter une vue de défilement et pour cela, vous devez importer la vue
de
défilement de React Native, alors
faisons-le ici, vue de défilement, importez-la de React Native et affichez-la sous la liste afin
que c'est un contenu défilable parce que là-bas,
j'aurai mon contenu dynamique, j'utiliserai mes suppositions passées et le mapperai dans une liste de composants.
Donc, ici, je vais avoir
ma supposition individuelle pour ainsi dire et cela devrait maintenant retourner un composant à l'intérieur de cette fonction
de carte et un tel composant de supposition pourrait être une vue disons, avec un texte là-dedans où je produis
simplement la supposition, donc ici, je rend cette supposition que je reçois et comme j'ajoute juste mes suppositions ici directement comme ceci au tableau, la
supposition que j'ai là-dedans est juste le nombre de suppositions et je peux simplement le produire comme ceci ici.
Maintenant, vous avez appris que pour les éléments que nous mappons comme celui-ci, vous devez également ajouter une clé et
nous pourrions utiliser notre supposition ici comme clé si nous
étions garantis d'être uniques, mais avec notre logique actuelle, ce n'est pas le cas parce que dans notre logique actuelle,
générer aléatoire entre génère en fait un nouveau nombre aléatoire où la limite supérieure, cette valeur élevée ici, est exclue mais la
limite inférieure est incluse, afin que nous puissions obtenir cette limite inférieure en tant que nouvelle valeur aléatoire.
Maintenant, l'inconvénient est qu'ici où nous définissons notre nouvelle limite inférieure, nous la définissons sur la supposition actuelle,
ce qui signifie que cela peut être répété dans un futur nombre aléatoire et nous l'avons vu dans
ce module
aussi, parfois , l'ordinateur devine un nombre qui avait déjà été deviné quelques fois plus tôt.
Ce n'est pas un gros problème mais maintenant c'est parce que maintenant nous avons besoin que notre supposition soit garantie,
unique et que le correctif soit simple, nous pouvons simplement en ajouter un ici lorsque nous définissons notre nouvelle limite inférieure
car en ajoutant un ici, nous nous assurons que la nouvelle limite inférieure qui est incluse dans la génération de nombres aléatoires est en fait
une plus élevée que la supposition actuelle qui était fausse, sinon nous
ne serions pas arrivés ici.
Alors maintenant, nous établissons une nouvelle limite inférieure qui peut être générée à l'avenir mais que nous n'avons pas
générée auparavant.
C'est donc un petit correctif dans la logique qui
ne fait aucun mal et c'est particulièrement important si vous prévoyez d'utiliser la conjecture comme clé unique ici.
Donc, avec cela,
voyons si cela fonctionne.
Gardons cela et essayons ici sur iOS, commençons le jeu
et nous
voyons notre première supposition, 57, ce n'est pas bien
formaté mais nous le voyons ici. Maintenant 57 est trop élevé, si je dis plus
bas, nous voyons la nouvelle supposition en haut de la liste et j'ai menti là-bas et cela semble fonctionner.
Maintenant, bien sûr, nous obtenons une erreur lorsque le jeu est terminé, car là-bas, nous essayons d'obtenir nos tours et nous ne
gérons plus cela en tant qu'état. Nous devrons donc résoudre ce
problème, mais la sortie de la liste fonctionne.
Corrigeons maintenant notre erreur de rounds que
nous obtenons, qui vient simplement de useEffect où je transfère les rounds à onGameOver. Là, à la fin, je dois transmettre le nombre de tours
qu'il a fallu à l'ordinateur pour deviner notre nombre.
Auparavant, nous avions ici une variable de rounds, un état de round, maintenant nous
avons juste des suppositions passées qui est un tableau, donc nous ne pouvons pas transmettre des suppositions passées comme ça parce qu'en
fin de partie, il faut un
nombre mais bien sûr, nous pouvons transmettre le longueur des suppositions passées qui est juste le nombre de tours qu'il a
fallu à l'ordinateur.
Donc, avec cela, si nous le faisons, nous devrions maintenant pouvoir également terminer le jeu avec succès.
Si nous essayons ici rapidement et résolvons le jeu, oui,
cela fonctionne.
Alors maintenant, nous avons ce travail,
tournons maintenant la tête vers cette vue de défilement et les éléments de liste
là-bas et assurons-nous d'avoir le bon style là-bas.