Prima di continuare con l'aggiornamento o la modifica dei dati o la loro eliminazione, assicuriamoci
comunque di non vedere inizialmente i dati fittizi qui ma che in realtà vediamo
uno spinner di caricamento e forse anche un messaggio se non ci sono dati da caricare o un messaggio di
errore se si verifica un errore e, per questo, iniziamo
con il filatore di caricamento. Nella schermata di panoramica dei prodotti, voglio
mostrare un filatore di caricamento mentre stiamo aspettando l'arrivo dei dati. Per questo dobbiamo prima di tutto
sapere se stiamo caricando o meno e possiamo controllarlo con lo stato d'uso,
quindi con uno stato interno in questo componente.
Quindi, possiamo aggiungere isLoading e impostare isLoading e quindi semplicemente usare lo stato qui in questo modo e inizialmente non stiamo caricando,
quindi ho impostato lo stato iniziale su
false e ora qui quando lo inviamo, quindi qui in uso effetto, ho impostato
isLoading su true ovviamente, ma una volta terminato, voglio ripristinarlo su false.
Ora la cosa buona è spedire qui invia la nostra azione di recupero dei prodotti e quindi questo qui ci dà effettivamente una promessa, quindi
qui posso aggiungere
e anche catturare più tardi per la gestione degli errori di fare qualcosa una volta che questo è fatto.
Puoi anche usare async await ma non è consentito usarlo in questo
modo qui nell'effetto di utilizzo, non è semplicemente come dovrebbe essere usato l'effetto di uso.
Quindi se vuoi usare usa asincrono qui, dovresti avvolgerlo in una funzione separata
che devi creare nel tuo effetto, come caricare prodotti che sono solo una funzione di wrapper fittizio
che assomiglia a questo, forse con set isLoading in anche lì.
Ora qui puoi aggiungere asincrono e ora puoi chiamare i prodotti di caricamento come quello subito dopo, semplicemente
un wrapper che è richiesto a causa del modo
in cui funziona l'effetto,
non deve restituire una promessa, lo farebbe se usi asincrono qui e pertanto, utilizzando asincrono non è
consentito, questo è invece consentito.
Quindi ora qui, possiamo
usare wait qui per aspettare che questo dispacciamento sia fatto, il che significa che questo attenderà automaticamente
la promessa che è lì dentro, quindi per la richiesta HTTP e da allora in poi impostiamo isLoading
su false una volta fatto.
Ora per mostrare uno spinner, per fortuna React Native ne ha ottenuto uno per noi, l'indicatore di
attività che apparirà automaticamente buono per
iOS e Android, quindi otterrà automaticamente lo stile di piattaforma
predefinito e ora possiamo renderlo se stiamo caricando. Quindi laggiù invece di restituire
la flat list, se isLoading è vero, restituirò un altro pezzo di jsx, restituirò una nuova vista
qui con il mio indicatore di attività lì dentro. Per quello, ovviamente, devi avere anche la vista importata, quindi assicurati che sia disponibile anche.
Ora con questo abbiamo restituito questa vista con l'indicatore di attività, lì puoi
impostare le dimensioni su grandi e il colore su Colori. primario per esempio e questo ovviamente richiede che tu abbia l'importazione della costante
di colori, quindi assicurati che sia disponibile e ultimo ma non meno importante, ora voglio centrare questo indicatore, quindi qui possiamo aggiungere uno
stile che ovviamente potremmo impostare con un foglio di stile o qui veloce e sporco,
flettere uno per giustificare il centro contenuti, allineare il centro elementi. Tuttavia in realtà userò un foglio di stile qui
perché ne avremo bisogno in un posto diverso in seguito.
Quindi qui farò riferimento agli stili, diciamo centrati e importiamo il foglio di stile da React Native e
con quello, quindi andate lì, aggiungo l'oggetto dei miei stili dopo aver impostato le opzioni
di navigazione, forse, gli stili con Stylesheet. creare, aggiungere la proprietà centrata lì che ha questo stile con flessibilità
giustificare allineare il contenuto e ora, con quello, dovremmo vedere un indicatore di attività centrata mentre stiamo caricando.
Quindi, se salvo questo e questo si ricarica, Firebase è molto veloce, quindi non lo vedi così a lungo ma per un
breve periodo di tempo, vedi lo spinner di caricamento qui, con il diverso aspetto su iOS e Android ovviamente.
Ora, ovviamente, il caricamento è una cosa, a volte anche tu non hai dati che potrebbero essere caricati. Diciamo in un
riduttore, stiamo raggiungendo il prodotto. json che è una fonte in cui non è possibile recuperare
dati e quindi si finisce con uno schermo vuoto.
Bene, questo è qualcosa che possiamo fare ma non è la
migliore esperienza utente possibile, quindi voglio aggiungerne un altro se controllo dove controllo se isLoading è falso, quindi se non
stiamo caricando più e i miei prodotti qui, la lunghezza è uguale a zero, il che significa che non abbiamo prodotti.
In tal caso, restituirò anche il mio contenuto centrato qui, ma lì voglio semplicemente generare un testo
in cui dico che non sono stati trovati prodotti, forse inizierò
ad aggiungerne alcuni e, ovviamente, devi assicurarti di importare il componente di testo e tu puoi anche assegnare i tuoi stili di carattere lì o creare un componente
di wrapper di testo predefinito che abbiamo usato nei moduli precedenti, per ora avrò solo il mio testo come questo
e questo è
davvero quello che vediamo lì per ora. Ovviamente, non appena torno all'URL
corretto in cui troviamo effettivamente i dati, funziona. Ora, ultimo ma non meno importante, potresti anche avere
un errore. Diciamo qui, non
ho. Json lì,
ovviamente questo è un errore che normalmente eviteremmo perché è solo un errore di battitura dalla nostra
parte, ma sfortunatamente i server Firebase sono relativamente robusti. Quindi, per fingere che, ad esempio, siano andati in errore o che
qualcosa
sia andato storto, romperò l'URL in questo modo che è un URL non valido e ora quello che vediamo è uno spinner infinito.
La ragione di ciò è che attualmente non abbiamo una risposta valida. Quindi, se diamo uno sguardo alla nostra azione qui e registriamo qui
i dati di questa risposta, vediamo che mentre questo viene ricaricato, il recupero dovrebbe avvenire immediatamente,
ma non otteniamo alcun output
lì, non vediamo
nulla da cui viene registrato
questo, abbiamo appena ricevuto un avviso di rifiuto promessa in un determinato momento, quindi sembra che stiamo semplicemente
ricevendo un errore e in questo momento,
non stiamo gestendo un errore.
Ora, se utilizzassi le promesse senza attese asincrone, aggiungeresti semplicemente una dichiarazione di cattura.
Qui stiamo usando async
wait in modo che ciò che facciamo sia racchiuderlo in un blocco try, tutto quel codice che alla
fine vogliamo eseguire se tutto ha successo e rilevare eventuali errori
qui, quindi un blocco try try. È qui che otteniamo un potenziale errore
e ora con quell'errore ottenuto qui, possiamo gestirlo, ad esempio inviarlo
al nostro server analitico o fare tutto ciò che vogliamo e quindi forse anche ricodificarlo, ovviamente se tutto ciò
che fai è riprogettandolo, non avresti avuto bisogno di aggiungere questo tentativo di blocco catch ma in
genere, potresti voler fare di più qui - invia al server di analisi personalizzato o qualcosa del
genere come ho già detto.
Quindi ora riprogrammiamo l'errore, ancora non meglio, ci fa ancora avere
un errore e oltre a provare a aggirarlo, dovremmo effettivamente aggiungere un altro controllo qui
prima di decomprimere il corpo della risposta,
dovremmo anche verificare se la risposta va bene è sbagliato, se questo è falso.
OK è un campo disponibile su questo oggetto di risposta e questo è semplicemente vero se la
risposta è nell'intervallo di 200 codici di stato. Se si trova in un intervallo diverso, ad esempio perché
non sei autenticato o qualcosa del genere, l'API di recupero per impostazione predefinita non genererebbe un errore.
Tuttavia, desidero generare un errore in quel caso in modo da finire sempre nel blocco catch se abbiamo un codice
di stato 400 o 500 o se abbiamo un problema di richiesta di rete, ad esempio se la richiesta non può nemmeno
lasciare il dispositivo.
Quindi qui e questo è il recupero dell'API specifica per gestire anche i codici di stato 400 e 500
che normalmente non
causerebbero un errore, lancerò anche un nuovo errore qui in quel caso in cui
dico che qualcosa è andato storto, ovviamente potresti tuffarti nel corpo di risposta anche qui in quel caso e scoprire
cosa c'è che non va lì, ma lancerò questo errore generico e ora avremo
sicuramente un errore se qualcosa va storto se non recuperiamo i nostri dati ma, comunque, ripeti l'errore qui.
Ma il posto in cui alla fine voglio gestirlo è il mio componente qui, il
mio componente dello schermo perché lì, voglio quindi mostrare un messaggio di errore. Quindi, lì dentro, abbiamo il nostro effetto e così
come potremmo usare il catch o il gestore del catch se usi allora e catch o async ti aspettano
con try catch
nell'azione, possiamo farlo anche qui.
Quindi qui, voglio provare a spedire questo, ma voglio catturare tutti i potenziali errori che potremmo ottenere.
Quindi qui colgo tutti
gli errori che ciò potrebbe produrre e dato che ho riproposto il mio errore lì, è quello che ho appena
fatto qui, giusto, alla fine l'errore ci raggiungerà qui.
Quindi ora alla fine finiremo in questo blocco catch e
ora per mostrare i nostri dati di errore, possiamo aggiungere un altro stato - errore e impostare l'errore, puoi nominarlo come
vuoi.
Inizialmente questo non è definito perché inizialmente non ho errori ma poi qui, chiamerò set error e lo
imposterò su error. messaggio per esempio, quindi
sto ricevendo il messaggio di questo errore.
Ovviamente, voglio impostare il caricamento su false in seguito, che non cambia perché sicuramente
non stiamo
più caricando anche se abbiamo un errore, ma ora abbiamo anche questo stato di errore che possiamo usare, possiamo
usarlo per controllare qui. Se abbiamo un
errore, quindi se è vero, non ho nemmeno bisogno di continuare, invece voglio restituire il mio contenuto jsx centrato qui ma lì, voglio
solo produrre un testo
dove dico che si è verificato un errore, ad esempio , come questo. Se ora lo facciamo, vedrai che vediamo un
filatore ma poi
vediamo
questo testo di errore. Ora, ovviamente, questo non consente all'utente
di fare molto, ora possiamo semplicemente allontanarci e poi tornare indietro,
ma potremmo voler dare all'utente un modo di riprovare, magari aggiungendo un pulsante qui. Quindi ora qui con il pulsante importato, possiamo
andare lì e quindi qui aggiungere questo componente pulsante con un titolo di riprovare e ovviamente dipende da te come vuoi che
l'utente lo gestisca e lì puoi aggiungere un gestore onPress
e ora per poterlo caricare di nuovo, prenderò effettivamente questa funzione di caricamento
dei prodotti qui, la sposterò dall'effetto e lo
renderò una funzione regolare di questo componente in modo da poterlo chiamare dall'interno
dell'effetto di utilizzo.
Ora però deve anche essere una dipendenza e quindi per evitare un ciclo
infinito, dovrebbe essere racchiuso nell'uso callback, quindi importiamo usa callback qui e avvolgiamolo attorno a questa funzione qui dove la dipendenza è quindi la mia
funzione di invio, puoi
anche
aggiungi set isLoading e set
error ma tutte queste funzioni non cambieranno mai, quindi potresti anche
ometterle e quindi questo non verrà mai ricreato, il che è buono ma ora
possiamo usare i prodotti di caricamento
come dipendenza qui in uso e ora poiché non
è all'interno della funzione di uso dell'effetto, possiamo usare il caricamento dei prodotti ovunque in
questo componente e la parte altrove è
qui questo pulsante, se lo premiamo, voglio anche innescare nuovamente il caricamento dei prodotti e anche ultimo
ma non meno importante, dare il pulsante colore dei colori. primario. Detto questo, sembra che qui ho un errore con le mie
importazioni, sì, avevo già importato il pulsante, quindi eliminiamo la seconda importazione, importala solo una volta
e ora ciò che
otterrai è che questo verrà effettivamente ricaricato, alla fine genera un errore e puoi premere riprovare per ricaricare questo, tuttavia vediamo
sempre il messaggio di errore semplicemente perché non cancelliamo mai l'errore e se
abbiamo un errore, lo restituiamo sempre,
non lo facciamo nemmeno al caricamento filatore.
Quindi dovremmo assicurarci che ogni volta che cariciamo i nostri prodotti qui, riportiamo
l'errore su null, quindi resettiamo l'errore. A proposito, più chiamate di stato impostate una accanto all'altra saranno raggruppate
insieme da React, quindi questo non porterà a cicli di ricalcolo di
più componenti, va bene usarlo in questo modo.
Quindi ora con quello se clicco riprovare, possiamo riprovare. Ovviamente non ci riuscirà mai perché il nostro
URL è rotto ma comunque, è così che possiamo gestire questo errore. Tuttavia, tornerò alle mie azioni e risolverò l'errore correggendo
di nuovo questo URL e ora anche questo dovrebbe caricare
correttamente i nostri dati e visualizzarli.