Ora, prima di finire questo modulo, torniamo ad alcuni elenchi e ad alcuni contenuti scorrevoli perché in questa
applicazione non abbiamo affatto tali contenuti
ed effettivamente, è fondamentale per voi capire come lavorare con gli elenchi e quali
stranezze speciali
sono quando si tratta di elenchi. Quindi diciamo che qui vogliamo registrare le ipotesi
precedenti fatte dal computer, vogliamo registrarlo qui sotto il nostro pulsante più e meno in questo spazio bianco vuoto qui.
Per questo, ovviamente, dobbiamo registrare qualsiasi ipotesi fatta dal computer e quindi emetterlo nell'elenco.
Quindi nella schermata di gioco, iniziamo con la registrazione.
Attualmente stiamo solo contando i round qui,
ma l'obiettivo deve essere che non contiamo solo i round ma che abbiamo anche salvato
i round, quindi abbiamo salvato un'ipotesi che è stata fatta
in ogni round e per raggiungerlo qui nei nostri round stato, possiamo semplicemente gestire un array invece di un numero
e chiamerò queste ipotesi passate per essere veramente chiaro su cosa c'è
dentro e questo è quindi chiamato Imposta ipotesi passate.
Quindi ora l'obiettivo è aggiungere una nuova ipotesi qui a questo array ogni volta che generiamo un nuovo numero
casuale, quindi qui nel prossimo gestore di ipotesi. Lì dove impostiamo i round, invece di impostare
i round in questo modo che non stiamo più gestendo, dobbiamo impostare
le nostre ipotesi passate e lì dobbiamo usare le nostre ipotesi precedenti e aggiungere effettivamente una nuova ipotesi qui.
Ora, per questo, possiamo usare quel modulo di funzione qui dove otteniamo curPastGuesses che è un po 'un nome
strano ma che significa semplicemente che questo è il nostro stato attuale e vogliamo
aggiornarlo o il nostro ultimo stato per essere precisi e noi vogliamo aggiornarlo e vogliamo aggiornarlo restituendo un nuovo
array che sarà il nostro nuovo stato e che ovviamente dovrebbe tener conto delle nostre
ipotesi passate attuali e quindi aggiungere nuove ipotesi lì.
Ora possiamo aggiungere una nuova ipotesi alla fine dell'elenco o all'inizio e in realtà la aggiungerò
all'inizio in modo che la nostra ipotesi più recente sia sempre in cima all'elenco quando in seguito la visualizziamo
sullo schermo .
Quindi qui, possiamo aggiungere il prossimo numero che è la nostra nuova ipotesi attuale che stiamo generando qui
ed è quello che dobbiamo aggiungere qui come elemento, giusto? Con ciò, stiamo aggiungendo nuovi elementi a questo array con ogni ipotesi.
Ora non dimenticare che iniziamo anche con un'ipotesi,
generiamo un'ipotesi iniziale qui, voglio iniziare
con quell'ipotesi nell'elenco e quindi, dobbiamo aggiungerlo all'elenco qui, quindi lo estrarrò dalla
nostra funzione state state chiama qui e crea una nuova ipotesi costante, iniziale che è questo numero generato
casualmente e ora è questa ipotesi iniziale che aggiungo qui per usare state ed è anche la supposizione iniziale
che aggiungo come primo elemento a quell'array in le nostre ipotesi passate, utilizzare l'inizializzazione
di stato.
Ora non dimenticare che usa lo stato come tutto questo codice qui ovviamente si ripete ogni volta che questo componente si esegue nuovamente il
rendering ma il modo in cui funziona lo stato è tale che React rileva che uno stato per questo componente è già
stato
inizializzato, quindi imposterà dichiarare a questa ipotesi iniziale per la prima volta il rendering di questo componente e non
per i rendering successivi. Lì, in
effetti, questa ipotesi iniziale verrà ricreata ma non verrà effettivamente utilizzata a causa della gestione dello
stato distaccato in cui React scopre che abbiamo già uno stato.
Quindi, stiamo inizializzando questo, inizializzando anche le nostre ipotesi qui in quella lista e stiamo aggiungendo una
nuova ipotesi alla lista in fondo qui. Con tutto ciò, dovremmo avere alcune
ipotesi passate che possiamo emettere in un elenco e ora
qui abbiamo due modi per emetterlo, con una FlatList o con la vista di scorrimento e inizierò di
nuovo con una vista di scorrimento per quello.
Quindi qui sotto la scheda, aggiungerò una vista di scorrimento e per questo, è necessario importare la vista di scorrimento da React
Native,
quindi facciamolo qui, scorri vista,
importalo da React Native e output quello sotto l'elenco in modo che questo è un
contenuto scorrevole perché lì dentro avrò il
mio contenuto dinamico, userò le mie ipotesi passate e lo mapperò in un elenco di componenti.
Quindi qui, avrò la mia
ipotesi individuale per così dire e questo dovrebbe ora restituire un componente all'interno di questa funzione
della mappa e un tale componente di ipotesi potrebbe essere una vista diciamo, con un testo lì dove ho
semplicemente emesso l'ipotesi, quindi qui rendo questa ipotesi che sto ricevendo e poiché ho appena aggiunto le mie ipotesi qui direttamente all'array, la
supposizione che ho dentro è solo il numero di ipotesi e posso semplicemente emetterlo in questo modo qui.
Ora hai imparato che per gli elementi che stiamo mappando in questo modo, devi anche aggiungere una chiave e
potremmo usare la nostra ipotesi qui come chiave se ci
si assicurasse che fosse unica ma con la nostra logica attuale, in realtà non lo è perché nella nostra logica
attuale, la generazione casuale tra genera in realtà un nuovo numero casuale in cui il limite superiore, questo valore elevato qui, è
escluso ma viene incluso il limite inferiore, quindi possiamo ottenere questo limite inferiore come nuovo valore casuale.
Ora il rovescio della medaglia di questo è che qui dove stiamo impostando il nostro nuovo limite inferiore, lo stiamo impostando
sull'ipotesi attuale, il che significa che questo può essere ripetuto in un futuro numero casuale e in realtà abbiamo visto
anche questo in
questo modulo, a volte lì , il computer indovina un numero già indovinato un paio di volte prima.
Non è un grosso problema, ma ora è perché ora abbiamo bisogno che la nostra ipotesi
sia garantita, per essere unica e la correzione è semplice, tuttavia possiamo semplicemente aggiungerne uno qui quando impostiamo
il nostro nuovo limite inferiore perché aggiungendo uno qui, assicuriamo che il nuovo limite inferiore incluso nella generazione di numeri casuali
è in realtà uno superiore all'ipotesi corrente che era falsa, altrimenti
non saremmo arrivati qui.
Quindi ora stiamo impostando un nuovo limite inferiore che può essere generato in futuro ma che non abbiamo
generato prima.
Quindi questa è una piccola correzione nella logica che
non danneggia in alcun modo ed è particolarmente importante se prevedi di utilizzare l'ipotesi come chiave unica qui.
Quindi, con
quello, vediamo se funziona.
Salviamolo e proviamolo qui su iOS, iniziamo il gioco
e vediamo
la nostra ipotesi iniziale, 57, non è ben
formattata ma lo vediamo qui. Ora 57 è troppo alto, se dico più
in basso, vediamo la nuova ipotesi in cima alla lista e ho mentito lì e sembra funzionare.
Ora, naturalmente, stiamo ricevendo un errore quando il gioco è finito perché lì, stiamo cercando di ottenere i nostri round e
non stiamo più gestendo questo stato. Quindi dovremo
risolverlo ma l'uscita dell'elenco funziona.
Ora correggiamo l'errore dei round che
stiamo ricevendo, che proviene semplicemente da useEffect dove inoltro i round a onGameOver. Lì alla fine ho bisogno di inoltrare il numero di
round necessari al computer per indovinare il nostro numero.
In precedenza avevamo una variabile di round qui, uno stato di round,
ora abbiamo solo ipotesi passate che sono un array, quindi non possiamo inoltrare ipotesi passate come questa perché alla
fine del gioco abbiamo bisogno
di un numero, ma ovviamente possiamo inoltrare il lunghezza delle ipotesi passate, che è solo il numero di round
necessari al computer.
Quindi, se lo facciamo, ora dovremmo effettivamente essere in grado di finire il gioco con successo.
Se diamo una rapida prova qui e risolviamo il gioco,
sì, funziona.
Quindi ora abbiamo quello che funziona, ora
giriamo la testa verso quella vista di scorrimento e le voci dell'elenco di nuovo lì
e assicuriamoci di avere lo stile giusto lì.