1 00:00:02,310 --> 00:00:10,050 Agora, antes de concluirmos este módulo, voltemos a algumas listas e a algum conteúdo rolável, porque neste aplicativo 2 00:00:10,050 --> 00:00:12,670 não temos esse conteúdo e, na 3 00:00:12,690 --> 00:00:18,570 verdade, é crucial que você entenda como trabalhar com listas e quais são alguns 4 00:00:18,570 --> 00:00:19,920 dos peculiaridades 5 00:00:19,920 --> 00:00:25,380 especiais são quando se trata de listas. Então, digamos que aqui queremos registrar as 6 00:00:25,380 --> 00:00:32,060 suposições anteriores feitas pelo computador, queremos registrá-las aqui embaixo do nosso botão de mais e menos neste espaço vazio aqui. 7 00:00:32,310 --> 00:00:38,910 Para isso, é claro que precisamos registrar qualquer palpite feito pelo computador e enviá-lo para a lista. 8 00:00:38,910 --> 00:00:41,880 Então, na tela do jogo, vamos começar registrando isso. 9 00:00:41,970 --> 00:00:44,610 Atualmente, estamos apenas contando as rodadas aqui, 10 00:00:44,610 --> 00:00:49,620 o objetivo, no entanto, deve ser que não contemos apenas as rodadas, mas que também salvamos as 11 00:00:49,650 --> 00:00:52,770 rodadas, por isso salvamos um palpite que foi feito em 12 00:00:52,920 --> 00:00:59,520 cada rodada e para alcançá-lo aqui em nossas rodadas estado, podemos simplesmente gerenciar uma matriz em vez de um número e vou 13 00:00:59,520 --> 00:01:03,510 nomear essas suposições do passado para ser realmente claro sobre o que está 14 00:01:03,690 --> 00:01:06,690 lá e, portanto, é chamado de definir suposições do passado. 15 00:01:06,690 --> 00:01:13,390 Portanto, agora o objetivo é adicionar um novo palpite aqui a essa matriz sempre que gerarmos um novo número 16 00:01:13,390 --> 00:01:19,530 aleatório, então aqui no próximo manipulador de palpites. Lá onde definimos as rodadas, em vez de 17 00:01:19,560 --> 00:01:23,660 definir as rodadas como esta que não estamos mais gerenciando, temos 18 00:01:23,790 --> 00:01:30,420 que definir nossas suposições passadas e precisamos usar nossas suposições anteriores e, na verdade, adicionar uma nova suposição aqui. 19 00:01:30,420 --> 00:01:37,540 Agora, para isso, podemos usar esse formulário de função aqui, onde obtemos o curPastGuesses, que é um nome um pouco 20 00:01:37,540 --> 00:01:42,790 estranho, mas que simplesmente significa que esse é o nosso estado atual e queremos atualizá-lo 21 00:01:42,790 --> 00:01:49,810 ou que é o nosso último estado para ser preciso e nós queremos atualizar isso e queremos atualizá-lo retornando uma 22 00:01:50,020 --> 00:01:55,720 nova matriz que será nosso novo estado e que, é claro, deve levar em consideração nossas 23 00:01:56,020 --> 00:01:59,680 suposições passadas atuais e, em seguida, adicionar novas suposições. 24 00:01:59,690 --> 00:02:04,280 Agora, podemos adicionar um novo palpite no final da lista ou no início e, na verdade, eu 25 00:02:04,280 --> 00:02:09,590 o adicionarei no início, para que o palpite mais recente esteja sempre no topo da lista quando posteriormente a renderizarmos 26 00:02:09,590 --> 00:02:10,520 na tela . 27 00:02:11,210 --> 00:02:17,600 Então aqui, podemos adicionar o próximo número, que é o nosso novo palpite atual que estamos gerando aqui 28 00:02:17,600 --> 00:02:25,440 e é isso que precisamos adicionar aqui como um item, certo? Com isso, adicionamos novos itens a essa matriz a cada palpite. 29 00:02:25,470 --> 00:02:28,760 Agora não esqueça que também começamos com um 30 00:02:28,770 --> 00:02:31,290 palpite, geramos um palpite inicial aqui, 31 00:02:31,290 --> 00:02:36,670 quero começar com esse palpite na lista e, portanto, temos que adicioná-lo à lista 32 00:02:36,720 --> 00:02:44,040 aqui, então vou extraí-lo da função de estado de uso, chame aqui e crie uma nova constante, palpite inicial, que 33 00:02:44,040 --> 00:02:51,910 é esse número gerado aleatoriamente e agora é esse palpite inicial que adiciono aqui para usar o estado e também é 34 00:02:51,910 --> 00:02:57,850 o palpite inicial que adiciono como primeiro elemento a esse array nossas suposições passadas, use a 35 00:02:57,850 --> 00:02:59,200 inicialização do estado. 36 00:02:59,200 --> 00:03:06,260 Agora, não se esqueça de que use state como todo esse código aqui, é executado novamente sempre que esse componente é renderizado novamente, mas 37 00:03:06,340 --> 00:03:12,670 a maneira como o estado de uso funciona é tal que o React detecta que um estado para esse componente já foi 38 00:03:12,670 --> 00:03:13,350 inicializado, 39 00:03:13,780 --> 00:03:19,210 portanto, apenas definirá o declare esse palpite inicial pela primeira vez em que esse componente é renderizado e 40 00:03:19,210 --> 00:03:21,400 não pelas renderizações subsequentes. De fato, 41 00:03:21,400 --> 00:03:28,120 essa suposição inicial será recriada, mas na verdade não será usada devido ao tratamento de estado 42 00:03:28,210 --> 00:03:33,060 desanexado em que o React descobre que já temos um estado. 43 00:03:33,070 --> 00:03:38,080 Então, com isso, estamos inicializando isso, também inicializamos nosso palpite aqui nessa lista e adicionamos um novo 44 00:03:38,380 --> 00:03:43,090 palpite à lista na parte inferior aqui. Com tudo isso, devemos ter algumas 45 00:03:43,240 --> 00:03:46,480 suposições passadas que podemos exibir em uma lista e agora 46 00:03:46,780 --> 00:03:52,300 aqui temos duas maneiras de produzir isso, com uma FlatList ou com a exibição de rolagem e 47 00:03:52,300 --> 00:03:54,660 voltarei a começar com uma exibição de rolagem. 48 00:03:54,730 --> 00:04:02,320 Então, aqui embaixo do cartão, adicionarei uma visualização de rolagem e, para isso, você precisará importar a visualização de rolagem do React 49 00:04:02,320 --> 00:04:02,890 Native, 50 00:04:03,010 --> 00:04:04,820 então vamos fazer isso aqui, 51 00:04:04,870 --> 00:04:10,060 visualização de rolagem, importá-la do React Native e exibir essa lista abaixo este é um 52 00:04:10,420 --> 00:04:13,190 conteúdo com rolagem, porque lá, eu terei 53 00:04:13,210 --> 00:04:18,620 meu conteúdo dinâmico, usarei minhas suposições passadas e mapeio isso em uma lista de componentes. 54 00:04:18,640 --> 00:04:20,550 Então, aqui, terei meu palpite 55 00:04:20,560 --> 00:04:26,140 individual, por assim dizer, e isso agora deve retornar um componente dentro dessa função de 56 00:04:26,140 --> 00:04:32,350 mapa, e esse componente de palpite pode ser uma visão, digamos, com um texto lá onde eu simplesmente 57 00:04:32,350 --> 00:04:39,880 produzo o palpite, então aqui eu mostro esse palpite que estou recebendo e, como adiciono minhas suposições aqui diretamente dessa maneira ao 58 00:04:39,880 --> 00:04:45,670 array, o palpite que tenho lá é apenas o número do palpite e posso simplesmente apresentá-lo aqui. 59 00:04:47,150 --> 00:04:53,600 Agora você aprendeu que, para itens que estamos mapeando assim, você também precisa adicionar uma chave e poderíamos 60 00:04:53,600 --> 00:04:57,340 usar nosso palpite aqui como uma chave, se for 61 00:04:57,350 --> 00:05:04,010 garantido que somos únicos, mas com nossa lógica atual, na verdade não é porque em nossa lógica atual, 62 00:05:04,010 --> 00:05:11,300 gerar aleatório entre gera um novo número aleatório onde o limite superior, esse valor alto aqui, é excluído, mas o 63 00:05:11,300 --> 00:05:17,190 limite inferior é incluído, para que possamos obter esse limite inferior como um novo valor aleatório. 64 00:05:17,300 --> 00:05:23,660 Agora, a desvantagem disso é que aqui, onde estamos definindo nosso novo limite inferior, definimos isso para o 65 00:05:23,660 --> 00:05:30,020 palpite atual, o que significa que isso pode ser repetido em um número aleatório futuro e também vimos 66 00:05:30,020 --> 00:05:31,120 isso também 67 00:05:31,130 --> 00:05:37,010 neste módulo, às vezes , o computador adivinha um número que já foi adivinhado algumas rodadas antes. 68 00:05:37,070 --> 00:05:42,900 Não é um problema enorme, mas agora é porque agora precisamos garantir nosso palpite, ser 69 00:05:43,190 --> 00:05:49,460 único e a correção é simples, podemos simplesmente adicionar um aqui quando definirmos nosso novo limite inferior, 70 00:05:49,460 --> 00:05:56,930 pois, ao adicionar um aqui, garantiremos que o novo limite inferior incluído na geração de números aleatórios é na verdade 71 00:05:57,410 --> 00:06:01,270 um superior ao palpite atual que era falso, caso contrário 72 00:06:01,280 --> 00:06:02,910 não teríamos chegado aqui. 73 00:06:02,930 --> 00:06:09,020 Então agora estamos estabelecendo um novo limite inferior que pode ser gerado no futuro, mas que não 74 00:06:09,020 --> 00:06:09,950 geramos antes. 75 00:06:09,950 --> 00:06:13,100 Portanto, essa é uma pequena correção na lógica que não 76 00:06:13,100 --> 00:06:18,560 prejudica nenhuma maneira e é especialmente importante se você planeja usar o palpite como uma chave exclusiva aqui. 77 00:06:18,640 --> 00:06:20,110 Então, com isso, 78 00:06:20,110 --> 00:06:21,670 vamos ver se isso funciona. 79 00:06:21,730 --> 00:06:26,190 Vamos salvar isso e tentar aqui no iOS, iniciar 80 00:06:26,190 --> 00:06:27,610 o jogo 81 00:06:27,750 --> 00:06:31,830 e ver nosso palpite inicial, 57, não está 82 00:06:31,830 --> 00:06:37,890 bem formatado, mas o vemos aqui. Agora 57 é muito alto, se eu disser 83 00:06:37,920 --> 00:06:43,670 mais baixo, vemos o novo palpite no topo da lista e eu menti lá, e isso parece funcionar. 84 00:06:43,740 --> 00:06:49,470 Agora é claro que estamos recebendo um erro quando o jogo termina, porque lá, estamos tentando dar a volta e não estamos 85 00:06:49,980 --> 00:06:53,730 mais gerenciando isso como um estado. Portanto, teremos que corrigir 86 00:06:53,910 --> 00:06:56,590 isso, mas a saída da lista funciona. 87 00:06:56,670 --> 00:06:59,140 Agora, vamos corrigir o erro das rodadas 88 00:06:59,160 --> 00:07:08,580 que estamos recebendo, que é simplesmente proveniente de useEffect, onde encaminhar as rodadas para onGameOver. No final, eu preciso encaminhar o número de rodadas que 89 00:07:08,580 --> 00:07:13,120 o computador levou para adivinhar o nosso número. 90 00:07:13,140 --> 00:07:17,030 Anteriormente, tínhamos uma variável rounds aqui, um estado round, agora só temos 91 00:07:17,040 --> 00:07:23,010 palpites passados, que são uma matriz, portanto não podemos encaminhar palpites passados como esse, porque no final do jogo 92 00:07:23,040 --> 00:07:24,660 precisamos de um número, mas 93 00:07:24,660 --> 00:07:30,440 é claro que podemos encaminhar o duração de suposições passadas, que é apenas o número de rodadas que 94 00:07:30,450 --> 00:07:31,520 levou o computador. 95 00:07:31,530 --> 00:07:37,920 Então, com isso, se fizermos isso, agora poderemos também terminar o jogo com sucesso. 96 00:07:37,980 --> 00:07:43,440 Se fizermos uma rápida tentativa aqui e resolvermos o jogo, sim, 97 00:07:43,440 --> 00:07:44,900 isso funciona. 98 00:07:45,030 --> 00:07:47,340 Então, agora que temos esse trabalho, agora 99 00:07:47,340 --> 00:07:51,750 vamos voltar para a exibição de rolagem e os itens da lista lá novamente 100 00:07:51,750 --> 00:07:54,210 e garantir que tenhamos o estilo certo lá.