1 00:00:02,310 --> 00:00:10,050 Maintenant, avant de terminer ce module, revenons à certaines listes et à un certain contenu défilant car dans cette application, nous 2 00:00:10,050 --> 00:00:12,670 n'avons aucun contenu de ce type et 3 00:00:12,690 --> 00:00:18,570 en fait, il est crucial pour vous de comprendre comment travailler avec des listes et ce 4 00:00:18,570 --> 00:00:19,920 que certains des 5 00:00:19,920 --> 00:00:25,380 bizarreries spéciales sont quand il s'agit de listes. Alors disons ici que nous voulons enregistrer les suppositions 6 00:00:25,380 --> 00:00:32,060 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. 7 00:00:32,310 --> 00:00:38,910 Pour cela, nous devons bien sûr enregistrer toutes les suppositions faites par l'ordinateur, puis les afficher dans la liste. 8 00:00:38,910 --> 00:00:41,880 Donc, dans l'écran de jeu, commençons par l'enregistrer. 9 00:00:41,970 --> 00:00:44,610 Actuellement, nous ne comptons que les tours ici, 10 00:00:44,610 --> 00:00:49,620 l'objectif doit cependant être que nous ne comptions pas seulement les tours, mais que nous ayons également enregistré 11 00:00:49,650 --> 00:00:52,770 les tours, nous avons donc enregistré une supposition qui a été 12 00:00:52,920 --> 00:00:59,520 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 13 00:00:59,520 --> 00:01:03,510 je vais nommer ces suppositions passées pour être vraiment clair sur ce qu'il y 14 00:01:03,690 --> 00:01:06,690 a dedans et cela est donc nommé définir les suppositions passées. 15 00:01:06,690 --> 00:01:13,390 Alors maintenant, le but est d'ajouter une nouvelle supposition ici à ce tableau chaque fois que nous générons un nouveau nombre 16 00:01:13,390 --> 00:01:19,530 aléatoire, donc ici dans le prochain gestionnaire de suppositions. Là où nous avons défini les tours, au 17 00:01:19,560 --> 00:01:23,660 lieu de définir des tours comme celui-ci que nous ne gérons plus, nous 18 00:01:23,790 --> 00:01:30,420 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. 19 00:01:30,420 --> 00:01:37,540 Maintenant, pour cela, nous pouvons utiliser cette forme de fonction ici où nous obtenons les curPastGuesses qui est un peu un nom étrange 20 00:01:37,540 --> 00:01:42,790 mais qui signifie simplement que c'est notre état actuel et nous voulons le mettre à jour 21 00:01:42,790 --> 00:01:49,810 ou c'est notre dernier état pour être précis et nous voulons mettre à jour cela et nous voulons le mettre à jour 22 00:01:50,020 --> 00:01:55,720 en renvoyant un nouveau tableau qui sera notre nouvel état et qui bien sûr devrait prendre en compte 23 00:01:56,020 --> 00:01:59,680 nos suppositions passées actuelles, puis y ajouter de nouvelles suppositions. 24 00:01:59,690 --> 00:02:04,280 Maintenant, nous pouvons ajouter une nouvelle supposition à la fin de cette liste ou au début et je 25 00:02:04,280 --> 00:02:09,590 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 26 00:02:09,590 --> 00:02:10,520 à l'écran . 27 00:02:11,210 --> 00:02:17,600 Donc ici, nous pouvons ajouter le numéro suivant qui est notre nouvelle estimation actuelle que nous générons ici et 28 00:02:17,600 --> 00:02:25,440 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. 29 00:02:25,470 --> 00:02:28,760 Maintenant, n'oubliez pas que nous commençons également par une 30 00:02:28,770 --> 00:02:31,290 supposition, nous générons une supposition initiale ici, 31 00:02:31,290 --> 00:02:36,670 je veux commencer par cette supposition dans la liste et donc, nous devons l'ajouter à 32 00:02:36,720 --> 00:02:44,040 la liste ici, donc je vais l'extraire à partir de notre fonction use state appeler ici et créer une nouvelle constante, 33 00:02:44,040 --> 00:02:51,910 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 34 00:02:51,910 --> 00:02:57,850 c'est aussi la supposition initiale que j'ajoute comme premier élément à ce tableau dans nos suppositions passées, 35 00:02:57,850 --> 00:02:59,200 utilisez l'initialisation d'état. 36 00:02:59,200 --> 00:03:06,260 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 37 00:03:06,340 --> 00:03:12,670 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 38 00:03:12,670 --> 00:03:13,350 donc 39 00:03:13,780 --> 00:03:19,210 que le indiquer cette supposition initiale pour la toute première fois que ce composant effectue le rendu et non 40 00:03:19,210 --> 00:03:21,400 pour les rendus suivants. Là, en 41 00:03:21,400 --> 00:03:28,120 effet, cette supposition initiale sera recréée, mais elle ne sera pas réellement utilisée en raison de la 42 00:03:28,210 --> 00:03:33,060 gestion de l'état détaché où React découvre que nous avons déjà un état. 43 00:03:33,070 --> 00:03:38,080 Donc, avec cela, nous initialisons ceci, nous initialisons également notre supposition ici dans cette liste et nous ajoutons une 44 00:03:38,380 --> 00:03:43,090 nouvelle supposition à la liste en bas ici. Avec tout cela, nous devrions avoir 45 00:03:43,240 --> 00:03:46,480 des suppositions passées que nous pouvons afficher dans une liste et 46 00:03:46,780 --> 00:03:52,300 maintenant nous avons deux façons de produire cela, avec une FlatList ou avec la vue de défilement et je 47 00:03:52,300 --> 00:03:54,660 recommencerai avec une vue de défilement pour cela. 48 00:03:54,730 --> 00:04:02,320 Donc, ici en dessous de la carte, je vais ajouter une vue de défilement et pour cela, vous devez importer la vue 49 00:04:02,320 --> 00:04:02,890 de 50 00:04:03,010 --> 00:04:04,820 défilement de React Native, alors 51 00:04:04,870 --> 00:04:10,060 faisons-le ici, vue de défilement, importez-la de React Native et affichez-la sous la liste afin 52 00:04:10,420 --> 00:04:13,190 que c'est un contenu défilable parce que là-bas, 53 00:04:13,210 --> 00:04:18,620 j'aurai mon contenu dynamique, j'utiliserai mes suppositions passées et le mapperai dans une liste de composants. 54 00:04:18,640 --> 00:04:20,550 Donc, ici, je vais avoir 55 00:04:20,560 --> 00:04:26,140 ma supposition individuelle pour ainsi dire et cela devrait maintenant retourner un composant à l'intérieur de cette fonction 56 00:04:26,140 --> 00:04:32,350 de carte et un tel composant de supposition pourrait être une vue disons, avec un texte là-dedans où je produis 57 00:04:32,350 --> 00:04:39,880 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 58 00:04:39,880 --> 00:04:45,670 supposition que j'ai là-dedans est juste le nombre de suppositions et je peux simplement le produire comme ceci ici. 59 00:04:47,150 --> 00:04:53,600 Maintenant, vous avez appris que pour les éléments que nous mappons comme celui-ci, vous devez également ajouter une clé et 60 00:04:53,600 --> 00:04:57,340 nous pourrions utiliser notre supposition ici comme clé si nous 61 00:04:57,350 --> 00:05:04,010 étions garantis d'être uniques, mais avec notre logique actuelle, ce n'est pas le cas parce que dans notre logique actuelle, 62 00:05:04,010 --> 00:05:11,300 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 63 00:05:11,300 --> 00:05:17,190 limite inférieure est incluse, afin que nous puissions obtenir cette limite inférieure en tant que nouvelle valeur aléatoire. 64 00:05:17,300 --> 00:05:23,660 Maintenant, l'inconvénient est qu'ici où nous définissons notre nouvelle limite inférieure, nous la définissons sur la supposition actuelle, 65 00:05:23,660 --> 00:05:30,020 ce qui signifie que cela peut être répété dans un futur nombre aléatoire et nous l'avons vu dans 66 00:05:30,020 --> 00:05:31,120 ce module 67 00:05:31,130 --> 00:05:37,010 aussi, parfois , l'ordinateur devine un nombre qui avait déjà été deviné quelques fois plus tôt. 68 00:05:37,070 --> 00:05:42,900 Ce n'est pas un gros problème mais maintenant c'est parce que maintenant nous avons besoin que notre supposition soit garantie, 69 00:05:43,190 --> 00:05:49,460 unique et que le correctif soit simple, nous pouvons simplement en ajouter un ici lorsque nous définissons notre nouvelle limite inférieure 70 00:05:49,460 --> 00:05:56,930 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 71 00:05:57,410 --> 00:06:01,270 une plus élevée que la supposition actuelle qui était fausse, sinon nous 72 00:06:01,280 --> 00:06:02,910 ne serions pas arrivés ici. 73 00:06:02,930 --> 00:06:09,020 Alors maintenant, nous établissons une nouvelle limite inférieure qui peut être générée à l'avenir mais que nous n'avons pas 74 00:06:09,020 --> 00:06:09,950 générée auparavant. 75 00:06:09,950 --> 00:06:13,100 C'est donc un petit correctif dans la logique qui 76 00:06:13,100 --> 00:06:18,560 ne fait aucun mal et c'est particulièrement important si vous prévoyez d'utiliser la conjecture comme clé unique ici. 77 00:06:18,640 --> 00:06:20,110 Donc, avec cela, 78 00:06:20,110 --> 00:06:21,670 voyons si cela fonctionne. 79 00:06:21,730 --> 00:06:26,190 Gardons cela et essayons ici sur iOS, commençons le jeu 80 00:06:26,190 --> 00:06:27,610 et nous 81 00:06:27,750 --> 00:06:31,830 voyons notre première supposition, 57, ce n'est pas bien 82 00:06:31,830 --> 00:06:37,890 formaté mais nous le voyons ici. Maintenant 57 est trop élevé, si je dis plus 83 00:06:37,920 --> 00:06:43,670 bas, nous voyons la nouvelle supposition en haut de la liste et j'ai menti là-bas et cela semble fonctionner. 84 00:06:43,740 --> 00:06:49,470 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 85 00:06:49,980 --> 00:06:53,730 gérons plus cela en tant qu'état. Nous devrons donc résoudre ce 86 00:06:53,910 --> 00:06:56,590 problème, mais la sortie de la liste fonctionne. 87 00:06:56,670 --> 00:06:59,140 Corrigeons maintenant notre erreur de rounds que 88 00:06:59,160 --> 00:07:08,580 nous obtenons, qui vient simplement de useEffect où je transfère les rounds à onGameOver. Là, à la fin, je dois transmettre le nombre de tours 89 00:07:08,580 --> 00:07:13,120 qu'il a fallu à l'ordinateur pour deviner notre nombre. 90 00:07:13,140 --> 00:07:17,030 Auparavant, nous avions ici une variable de rounds, un état de round, maintenant nous 91 00:07:17,040 --> 00:07:23,010 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 92 00:07:23,040 --> 00:07:24,660 fin de partie, il faut un 93 00:07:24,660 --> 00:07:30,440 nombre mais bien sûr, nous pouvons transmettre le longueur des suppositions passées qui est juste le nombre de tours qu'il a 94 00:07:30,450 --> 00:07:31,520 fallu à l'ordinateur. 95 00:07:31,530 --> 00:07:37,920 Donc, avec cela, si nous le faisons, nous devrions maintenant pouvoir également terminer le jeu avec succès. 96 00:07:37,980 --> 00:07:43,440 Si nous essayons ici rapidement et résolvons le jeu, oui, 97 00:07:43,440 --> 00:07:44,900 cela fonctionne. 98 00:07:45,030 --> 00:07:47,340 Alors maintenant, nous avons ce travail, 99 00:07:47,340 --> 00:07:51,750 tournons maintenant la tête vers cette vue de défilement et les éléments de liste 100 00:07:51,750 --> 00:07:54,210 là-bas et assurons-nous d'avoir le bon style là-bas.