Agora, antes de concluirmos este módulo, voltemos a algumas listas e a algum conteúdo rolável, porque neste aplicativo
não temos esse conteúdo e, na
verdade, é crucial que você entenda como trabalhar com listas e quais são alguns
dos peculiaridades
especiais são quando se trata de listas. Então, digamos que aqui queremos registrar as
suposições anteriores feitas pelo computador, queremos registrá-las aqui embaixo do nosso botão de mais e menos neste espaço vazio aqui.
Para isso, é claro que precisamos registrar qualquer palpite feito pelo computador e enviá-lo para a lista.
Então, na tela do jogo, vamos começar registrando isso.
Atualmente, estamos apenas contando as rodadas aqui,
o objetivo, no entanto, deve ser que não contemos apenas as rodadas, mas que também salvamos as
rodadas, por isso salvamos um palpite que foi feito em
cada rodada e para alcançá-lo aqui em nossas rodadas estado, podemos simplesmente gerenciar uma matriz em vez de um número e vou
nomear essas suposições do passado para ser realmente claro sobre o que está
lá e, portanto, é chamado de definir suposições do passado.
Portanto, agora o objetivo é adicionar um novo palpite aqui a essa matriz sempre que gerarmos um novo número
aleatório, então aqui no próximo manipulador de palpites. Lá onde definimos as rodadas, em vez de
definir as rodadas como esta que não estamos mais gerenciando, temos
que definir nossas suposições passadas e precisamos usar nossas suposições anteriores e, na verdade, adicionar uma nova suposição aqui.
Agora, para isso, podemos usar esse formulário de função aqui, onde obtemos o curPastGuesses, que é um nome um pouco
estranho, mas que simplesmente significa que esse é o nosso estado atual e queremos atualizá-lo
ou que é o nosso último estado para ser preciso e nós queremos atualizar isso e queremos atualizá-lo retornando uma
nova matriz que será nosso novo estado e que, é claro, deve levar em consideração nossas
suposições passadas atuais e, em seguida, adicionar novas suposições.
Agora, podemos adicionar um novo palpite no final da lista ou no início e, na verdade, eu
o adicionarei no início, para que o palpite mais recente esteja sempre no topo da lista quando posteriormente a renderizarmos
na tela .
Então aqui, podemos adicionar o próximo número, que é o nosso novo palpite atual que estamos gerando aqui
e é isso que precisamos adicionar aqui como um item, certo? Com isso, adicionamos novos itens a essa matriz a cada palpite.
Agora não esqueça que também começamos com um
palpite, geramos um palpite inicial aqui,
quero começar com esse palpite na lista e, portanto, temos que adicioná-lo à lista
aqui, então vou extraí-lo da função de estado de uso, chame aqui e crie uma nova constante, palpite inicial, que
é esse número gerado aleatoriamente e agora é esse palpite inicial que adiciono aqui para usar o estado e também é
o palpite inicial que adiciono como primeiro elemento a esse array nossas suposições passadas, use a
inicialização do estado.
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
a maneira como o estado de uso funciona é tal que o React detecta que um estado para esse componente já foi
inicializado,
portanto, apenas definirá o declare esse palpite inicial pela primeira vez em que esse componente é renderizado e
não pelas renderizações subsequentes. De fato,
essa suposição inicial será recriada, mas na verdade não será usada devido ao tratamento de estado
desanexado em que o React descobre que já temos um estado.
Então, com isso, estamos inicializando isso, também inicializamos nosso palpite aqui nessa lista e adicionamos um novo
palpite à lista na parte inferior aqui. Com tudo isso, devemos ter algumas
suposições passadas que podemos exibir em uma lista e agora
aqui temos duas maneiras de produzir isso, com uma FlatList ou com a exibição de rolagem e
voltarei a começar com uma exibição de rolagem.
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
Native,
então vamos fazer isso aqui,
visualização de rolagem, importá-la do React Native e exibir essa lista abaixo este é um
conteúdo com rolagem, porque lá, eu terei
meu conteúdo dinâmico, usarei minhas suposições passadas e mapeio isso em uma lista de componentes.
Então, aqui, terei meu palpite
individual, por assim dizer, e isso agora deve retornar um componente dentro dessa função de
mapa, e esse componente de palpite pode ser uma visão, digamos, com um texto lá onde eu simplesmente
produzo o palpite, então aqui eu mostro esse palpite que estou recebendo e, como adiciono minhas suposições aqui diretamente dessa maneira ao
array, o palpite que tenho lá é apenas o número do palpite e posso simplesmente apresentá-lo aqui.
Agora você aprendeu que, para itens que estamos mapeando assim, você também precisa adicionar uma chave e poderíamos
usar nosso palpite aqui como uma chave, se for
garantido que somos únicos, mas com nossa lógica atual, na verdade não é porque em nossa lógica atual,
gerar aleatório entre gera um novo número aleatório onde o limite superior, esse valor alto aqui, é excluído, mas o
limite inferior é incluído, para que possamos obter esse limite inferior como um novo valor aleatório.
Agora, a desvantagem disso é que aqui, onde estamos definindo nosso novo limite inferior, definimos isso para o
palpite atual, o que significa que isso pode ser repetido em um número aleatório futuro e também vimos
isso também
neste módulo, às vezes , o computador adivinha um número que já foi adivinhado algumas rodadas antes.
Não é um problema enorme, mas agora é porque agora precisamos garantir nosso palpite, ser
único e a correção é simples, podemos simplesmente adicionar um aqui quando definirmos nosso novo limite inferior,
pois, ao adicionar um aqui, garantiremos que o novo limite inferior incluído na geração de números aleatórios é na verdade
um superior ao palpite atual que era falso, caso contrário
não teríamos chegado aqui.
Então agora estamos estabelecendo um novo limite inferior que pode ser gerado no futuro, mas que não
geramos antes.
Portanto, essa é uma pequena correção na lógica que não
prejudica nenhuma maneira e é especialmente importante se você planeja usar o palpite como uma chave exclusiva aqui.
Então, com isso,
vamos ver se isso funciona.
Vamos salvar isso e tentar aqui no iOS, iniciar
o jogo
e ver nosso palpite inicial, 57, não está
bem formatado, mas o vemos aqui. Agora 57 é muito alto, se eu disser
mais baixo, vemos o novo palpite no topo da lista e eu menti lá, e isso parece funcionar.
Agora é claro que estamos recebendo um erro quando o jogo termina, porque lá, estamos tentando dar a volta e não estamos
mais gerenciando isso como um estado. Portanto, teremos que corrigir
isso, mas a saída da lista funciona.
Agora, vamos corrigir o erro das rodadas
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
o computador levou para adivinhar o nosso número.
Anteriormente, tínhamos uma variável rounds aqui, um estado round, agora só temos
palpites passados, que são uma matriz, portanto não podemos encaminhar palpites passados como esse, porque no final do jogo
precisamos de um número, mas
é claro que podemos encaminhar o duração de suposições passadas, que é apenas o número de rodadas que
levou o computador.
Então, com isso, se fizermos isso, agora poderemos também terminar o jogo com sucesso.
Se fizermos uma rápida tentativa aqui e resolvermos o jogo, sim,
isso funciona.
Então, agora que temos esse trabalho, agora
vamos voltar para a exibição de rolagem e os itens da lista lá novamente
e garantir que tenhamos o estilo certo lá.