1
00:00:02,200 --> 00:00:06,570
Prima di continuare con l'aggiornamento o la modifica dei dati o la loro eliminazione, assicuriamoci

2
00:00:06,680 --> 00:00:10,810
comunque di non vedere inizialmente i dati fittizi qui ma che in realtà vediamo

3
00:00:10,810 --> 00:00:16,660
uno spinner di caricamento e forse anche un messaggio se non ci sono dati da caricare o un messaggio di

4
00:00:16,840 --> 00:00:19,810
errore se si verifica un errore e, per questo, iniziamo

5
00:00:19,810 --> 00:00:23,400
con il filatore di caricamento. Nella schermata di panoramica dei prodotti, voglio

6
00:00:23,470 --> 00:00:28,270
mostrare un filatore di caricamento mentre stiamo aspettando l'arrivo dei dati. Per questo dobbiamo prima di tutto

7
00:00:28,270 --> 00:00:32,430
sapere se stiamo caricando o meno e possiamo controllarlo con lo stato d'uso,

8
00:00:32,440 --> 00:00:34,850
quindi con uno stato interno in questo componente.

9
00:00:35,140 --> 00:00:42,910
Quindi, possiamo aggiungere isLoading e impostare isLoading e quindi semplicemente usare lo stato qui in questo modo e inizialmente non stiamo caricando,

10
00:00:42,910 --> 00:00:45,890
quindi ho impostato lo stato iniziale su

11
00:00:46,630 --> 00:00:51,610
false e ora qui quando lo inviamo, quindi qui in uso effetto, ho impostato

12
00:00:51,610 --> 00:00:56,130
isLoading su true ovviamente, ma una volta terminato, voglio ripristinarlo su false.

13
00:00:56,170 --> 00:01:03,610
Ora la cosa buona è spedire qui invia la nostra azione di recupero dei prodotti e quindi questo qui ci dà effettivamente una promessa, quindi

14
00:01:03,610 --> 00:01:04,780
qui posso aggiungere

15
00:01:04,840 --> 00:01:10,690
e anche catturare più tardi per la gestione degli errori di fare qualcosa una volta che questo è fatto.

16
00:01:10,870 --> 00:01:15,670
Puoi anche usare async await ma non è consentito usarlo in questo

17
00:01:15,670 --> 00:01:20,910
modo qui nell'effetto di utilizzo, non è semplicemente come dovrebbe essere usato l'effetto di uso.

18
00:01:20,910 --> 00:01:25,910
Quindi se vuoi usare usa asincrono qui, dovresti avvolgerlo in una funzione separata

19
00:01:25,910 --> 00:01:32,720
che devi creare nel tuo effetto, come caricare prodotti che sono solo una funzione di wrapper fittizio

20
00:01:32,720 --> 00:01:37,350
che assomiglia a questo, forse con set isLoading in anche lì.

21
00:01:37,350 --> 00:01:43,530
Ora qui puoi aggiungere asincrono e ora puoi chiamare i prodotti di caricamento come quello subito dopo, semplicemente

22
00:01:43,530 --> 00:01:46,530
un wrapper che è richiesto a causa del modo

23
00:01:46,530 --> 00:01:48,260
in cui funziona l'effetto,

24
00:01:48,300 --> 00:01:54,030
non deve restituire una promessa, lo farebbe se usi asincrono qui e pertanto, utilizzando asincrono non è

25
00:01:54,030 --> 00:01:55,940
consentito, questo è invece consentito.

26
00:01:55,950 --> 00:01:57,520
Quindi ora qui, possiamo

27
00:01:57,540 --> 00:02:03,060
usare wait qui per aspettare che questo dispacciamento sia fatto, il che significa che questo attenderà automaticamente

28
00:02:03,060 --> 00:02:08,670
la promessa che è lì dentro, quindi per la richiesta HTTP e da allora in poi impostiamo isLoading

29
00:02:08,670 --> 00:02:10,300
su false una volta fatto.

30
00:02:10,710 --> 00:02:16,380
Ora per mostrare uno spinner, per fortuna React Native ne ha ottenuto uno per noi, l'indicatore di

31
00:02:16,380 --> 00:02:18,810
attività che apparirà automaticamente buono per

32
00:02:18,840 --> 00:02:21,950
iOS e Android, quindi otterrà automaticamente lo stile di piattaforma

33
00:02:22,320 --> 00:02:27,630
predefinito e ora possiamo renderlo se stiamo caricando. Quindi laggiù invece di restituire

34
00:02:27,630 --> 00:02:34,740
la flat list, se isLoading è vero, restituirò un altro pezzo di jsx, restituirò una nuova vista

35
00:02:34,740 --> 00:02:42,040
qui con il mio indicatore di attività lì dentro. Per quello, ovviamente, devi avere anche la vista importata, quindi assicurati che sia disponibile anche.

36
00:02:44,480 --> 00:02:49,370
Ora con questo abbiamo restituito questa vista con l'indicatore di attività, lì puoi

37
00:02:49,380 --> 00:02:58,310
impostare le dimensioni su grandi e il colore su Colori. primario per esempio e questo ovviamente richiede che tu abbia l'importazione della costante

38
00:02:58,310 --> 00:03:05,830
di colori, quindi assicurati che sia disponibile e ultimo ma non meno importante, ora voglio centrare questo indicatore, quindi qui possiamo aggiungere uno

39
00:03:05,830 --> 00:03:10,960
stile che ovviamente potremmo impostare con un foglio di stile o qui veloce e sporco,

40
00:03:11,020 --> 00:03:18,880
flettere uno per giustificare il centro contenuti, allineare il centro elementi. Tuttavia in realtà userò un foglio di stile qui

41
00:03:18,880 --> 00:03:23,010
perché ne avremo bisogno in un posto diverso in seguito.

42
00:03:23,110 --> 00:03:33,450
Quindi qui farò riferimento agli stili, diciamo centrati e importiamo il foglio di stile da React Native e

43
00:03:33,450 --> 00:03:41,640
con quello, quindi andate lì, aggiungo l'oggetto dei miei stili dopo aver impostato le opzioni

44
00:03:41,640 --> 00:03:50,890
di navigazione, forse, gli stili con Stylesheet. creare, aggiungere la proprietà centrata lì che ha questo stile con flessibilità

45
00:03:50,890 --> 00:03:57,450
giustificare allineare il contenuto e ora, con quello, dovremmo vedere un indicatore di attività centrata mentre stiamo caricando.

46
00:03:57,570 --> 00:04:03,790
Quindi, se salvo questo e questo si ricarica, Firebase è molto veloce, quindi non lo vedi così a lungo ma per un

47
00:04:03,790 --> 00:04:09,580
breve periodo di tempo, vedi lo spinner di caricamento qui, con il diverso aspetto su iOS e Android ovviamente.

48
00:04:12,900 --> 00:04:19,110
Ora, ovviamente, il caricamento è una cosa, a volte anche tu non hai dati che potrebbero essere caricati. Diciamo in un

49
00:04:19,110 --> 00:04:25,740
riduttore, stiamo raggiungendo il prodotto. json che è una fonte in cui non è possibile recuperare

50
00:04:25,740 --> 00:04:28,750
dati e quindi si finisce con uno schermo vuoto.

51
00:04:29,150 --> 00:04:32,920
Bene, questo è qualcosa che possiamo fare ma non è la

52
00:04:33,060 --> 00:04:39,540
migliore esperienza utente possibile, quindi voglio aggiungerne un altro se controllo dove controllo se isLoading è falso, quindi se non

53
00:04:41,530 --> 00:04:48,190
stiamo caricando più e i miei prodotti qui, la lunghezza è uguale a zero, il che significa che non abbiamo prodotti.

54
00:04:48,190 --> 00:04:54,340
In tal caso, restituirò anche il mio contenuto centrato qui, ma lì voglio semplicemente generare un testo

55
00:04:54,340 --> 00:04:58,230
in cui dico che non sono stati trovati prodotti, forse inizierò

56
00:04:58,240 --> 00:05:08,530
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

57
00:05:08,530 --> 00:05:15,880
di wrapper di testo predefinito che abbiamo usato nei moduli precedenti, per ora avrò solo il mio testo come questo

58
00:05:15,880 --> 00:05:17,140
e questo è

59
00:05:17,140 --> 00:05:22,900
davvero quello che vediamo lì per ora. Ovviamente, non appena torno all'URL

60
00:05:22,900 --> 00:05:31,360
corretto in cui troviamo effettivamente i dati, funziona. Ora, ultimo ma non meno importante, potresti anche avere

61
00:05:31,360 --> 00:05:33,680
un errore. Diciamo qui, non

62
00:05:33,700 --> 00:05:35,850
ho. Json lì,

63
00:05:35,860 --> 00:05:41,610
ovviamente questo è un errore che normalmente eviteremmo perché è solo un errore di battitura dalla nostra

64
00:05:41,620 --> 00:05:48,010
parte, ma sfortunatamente i server Firebase sono relativamente robusti. Quindi, per fingere che, ad esempio, siano andati in errore o che

65
00:05:48,010 --> 00:05:48,520
qualcosa

66
00:05:48,550 --> 00:05:54,850
sia andato storto, romperò l'URL in questo modo che è un URL non valido e ora quello che vediamo è uno spinner infinito.

67
00:05:55,120 --> 00:06:04,340
La ragione di ciò è che attualmente non abbiamo una risposta valida. Quindi, se diamo uno sguardo alla nostra azione qui e registriamo qui

68
00:06:04,340 --> 00:06:10,490
i dati di questa risposta, vediamo che mentre questo viene ricaricato, il recupero dovrebbe avvenire immediatamente,

69
00:06:14,420 --> 00:06:16,220
ma non otteniamo alcun output

70
00:06:19,170 --> 00:06:20,950
lì, non vediamo

71
00:06:21,060 --> 00:06:23,130
nulla da cui viene registrato

72
00:06:23,160 --> 00:06:29,760
questo, abbiamo appena ricevuto un avviso di rifiuto promessa in un determinato momento, quindi sembra che stiamo semplicemente

73
00:06:29,970 --> 00:06:32,470
ricevendo un errore e in questo momento,

74
00:06:32,820 --> 00:06:34,870
non stiamo gestendo un errore.

75
00:06:34,890 --> 00:06:39,990
Ora, se utilizzassi le promesse senza attese asincrone, aggiungeresti semplicemente una dichiarazione di cattura.

76
00:06:39,990 --> 00:06:41,720
Qui stiamo usando async

77
00:06:41,720 --> 00:06:48,660
wait in modo che ciò che facciamo sia racchiuderlo in un blocco try, tutto quel codice che alla

78
00:06:48,660 --> 00:06:52,960
fine vogliamo eseguire se tutto ha successo e rilevare eventuali errori

79
00:06:52,960 --> 00:06:57,340
qui, quindi un blocco try try. È qui che otteniamo un potenziale errore

80
00:06:57,340 --> 00:07:00,820
e ora con quell'errore ottenuto qui, possiamo gestirlo, ad esempio inviarlo

81
00:07:00,820 --> 00:07:06,460
al nostro server analitico o fare tutto ciò che vogliamo e quindi forse anche ricodificarlo, ovviamente se tutto ciò

82
00:07:06,670 --> 00:07:11,740
che fai è riprogettandolo, non avresti avuto bisogno di aggiungere questo tentativo di blocco catch ma in

83
00:07:11,740 --> 00:07:17,080
genere, potresti voler fare di più qui - invia al server di analisi personalizzato o qualcosa del

84
00:07:17,080 --> 00:07:18,930
genere come ho già detto.

85
00:07:19,150 --> 00:07:23,800
Quindi ora riprogrammiamo l'errore, ancora non meglio, ci fa ancora avere

86
00:07:23,860 --> 00:07:29,890
un errore e oltre a provare a aggirarlo, dovremmo effettivamente aggiungere un altro controllo qui

87
00:07:29,890 --> 00:07:32,890
prima di decomprimere il corpo della risposta,

88
00:07:32,890 --> 00:07:38,770
dovremmo anche verificare se la risposta va bene è sbagliato, se questo è falso.

89
00:07:38,770 --> 00:07:44,670
OK è un campo disponibile su questo oggetto di risposta e questo è semplicemente vero se la

90
00:07:44,680 --> 00:07:50,800
risposta è nell'intervallo di 200 codici di stato. Se si trova in un intervallo diverso, ad esempio perché

91
00:07:50,800 --> 00:07:55,360
non sei autenticato o qualcosa del genere, l'API di recupero per impostazione predefinita non genererebbe un errore.

92
00:07:55,360 --> 00:08:01,000
Tuttavia, desidero generare un errore in quel caso in modo da finire sempre nel blocco catch se abbiamo un codice

93
00:08:01,450 --> 00:08:07,780
di stato 400 o 500 o se abbiamo un problema di richiesta di rete, ad esempio se la richiesta non può nemmeno

94
00:08:07,780 --> 00:08:08,790
lasciare il dispositivo.

95
00:08:08,980 --> 00:08:15,250
Quindi qui e questo è il recupero dell'API specifica per gestire anche i codici di stato 400 e 500

96
00:08:15,250 --> 00:08:16,590
che normalmente non

97
00:08:16,600 --> 00:08:21,350
causerebbero un errore, lancerò anche un nuovo errore qui in quel caso in cui

98
00:08:21,370 --> 00:08:27,850
dico che qualcosa è andato storto, ovviamente potresti tuffarti nel corpo di risposta anche qui in quel caso e scoprire

99
00:08:28,150 --> 00:08:32,910
cosa c'è che non va lì, ma lancerò questo errore generico e ora avremo

100
00:08:32,920 --> 00:08:38,750
sicuramente un errore se qualcosa va storto se non recuperiamo i nostri dati ma, comunque, ripeti l'errore qui.

101
00:08:38,770 --> 00:08:43,020
Ma il posto in cui alla fine voglio gestirlo è il mio componente qui, il

102
00:08:43,030 --> 00:08:50,640
mio componente dello schermo perché lì, voglio quindi mostrare un messaggio di errore. Quindi, lì dentro, abbiamo il nostro effetto e così

103
00:08:50,830 --> 00:08:58,330
come potremmo usare il catch o il gestore del catch se usi allora e catch o async ti aspettano

104
00:08:58,330 --> 00:08:59,860
con try catch

105
00:08:59,920 --> 00:09:01,800
nell'azione, possiamo farlo anche qui.

106
00:09:01,840 --> 00:09:09,380
Quindi qui, voglio provare a spedire questo, ma voglio catturare tutti i potenziali errori che potremmo ottenere.

107
00:09:09,400 --> 00:09:10,830
Quindi qui colgo tutti

108
00:09:10,840 --> 00:09:16,810
gli errori che ciò potrebbe produrre e dato che ho riproposto il mio errore lì, è quello che ho appena

109
00:09:16,840 --> 00:09:19,370
fatto qui, giusto, alla fine l'errore ci raggiungerà qui.

110
00:09:19,400 --> 00:09:22,750
Quindi ora alla fine finiremo in questo blocco catch e

111
00:09:23,080 --> 00:09:29,740
ora per mostrare i nostri dati di errore, possiamo aggiungere un altro stato - errore e impostare l'errore, puoi nominarlo come

112
00:09:29,740 --> 00:09:30,250
vuoi.

113
00:09:30,340 --> 00:09:38,690
Inizialmente questo non è definito perché inizialmente non ho errori ma poi qui, chiamerò set error e lo

114
00:09:38,690 --> 00:09:41,540
imposterò su error. messaggio per esempio, quindi

115
00:09:41,540 --> 00:09:43,670
sto ricevendo il messaggio di questo errore.

116
00:09:46,500 --> 00:09:51,330
Ovviamente, voglio impostare il caricamento su false in seguito, che non cambia perché sicuramente

117
00:09:51,330 --> 00:09:52,330
non stiamo

118
00:09:52,350 --> 00:09:58,920
più caricando anche se abbiamo un errore, ma ora abbiamo anche questo stato di errore che possiamo usare, possiamo

119
00:09:58,920 --> 00:10:01,490
usarlo per controllare qui. Se abbiamo un

120
00:10:01,500 --> 00:10:08,820
errore, quindi se è vero, non ho nemmeno bisogno di continuare, invece voglio restituire il mio contenuto jsx centrato qui ma lì, voglio

121
00:10:08,820 --> 00:10:10,130
solo produrre un testo

122
00:10:10,140 --> 00:10:18,620
dove dico che si è verificato un errore, ad esempio , come questo. Se ora lo facciamo, vedrai che vediamo un

123
00:10:18,650 --> 00:10:20,290
filatore ma poi

124
00:10:20,320 --> 00:10:21,370
vediamo

125
00:10:21,380 --> 00:10:24,990
questo testo di errore. Ora, ovviamente, questo non consente all'utente

126
00:10:24,990 --> 00:10:27,800
di fare molto, ora possiamo semplicemente allontanarci e poi tornare indietro,

127
00:10:29,820 --> 00:10:36,820
ma potremmo voler dare all'utente un modo di riprovare, magari aggiungendo un pulsante qui. Quindi ora qui con il pulsante importato, possiamo

128
00:10:36,820 --> 00:10:45,860
andare lì e quindi qui aggiungere questo componente pulsante con un titolo di riprovare e ovviamente dipende da te come vuoi che

129
00:10:45,870 --> 00:10:49,810
l'utente lo gestisca e lì puoi aggiungere un gestore onPress

130
00:10:49,920 --> 00:10:55,260
e ora per poterlo caricare di nuovo, prenderò effettivamente questa funzione di caricamento

131
00:10:55,350 --> 00:10:58,770
dei prodotti qui, la sposterò dall'effetto e lo

132
00:10:58,770 --> 00:11:04,290
renderò una funzione regolare di questo componente in modo da poterlo chiamare dall'interno

133
00:11:04,290 --> 00:11:06,030
dell'effetto di utilizzo.

134
00:11:06,090 --> 00:11:10,740
Ora però deve anche essere una dipendenza e quindi per evitare un ciclo

135
00:11:10,800 --> 00:11:19,350
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

136
00:11:19,350 --> 00:11:20,920
funzione di invio, puoi

137
00:11:20,980 --> 00:11:21,870
anche

138
00:11:21,870 --> 00:11:23,760
aggiungi set isLoading e set

139
00:11:23,800 --> 00:11:27,600
error ma tutte queste funzioni non cambieranno mai, quindi potresti anche

140
00:11:27,640 --> 00:11:32,440
ometterle e quindi questo non verrà mai ricreato, il che è buono ma ora

141
00:11:32,440 --> 00:11:34,480
possiamo usare i prodotti di caricamento

142
00:11:34,630 --> 00:11:37,930
come dipendenza qui in uso e ora poiché non

143
00:11:37,960 --> 00:11:43,120
è all'interno della funzione di uso dell'effetto, possiamo usare il caricamento dei prodotti ovunque in

144
00:11:43,120 --> 00:11:45,750
questo componente e la parte altrove è

145
00:11:45,750 --> 00:11:51,700
qui questo pulsante, se lo premiamo, voglio anche innescare nuovamente il caricamento dei prodotti e anche ultimo

146
00:11:52,000 --> 00:12:02,260
ma non meno importante, dare il pulsante colore dei colori. primario. Detto questo, sembra che qui ho un errore con le mie

147
00:12:02,260 --> 00:12:07,590
importazioni, sì, avevo già importato il pulsante, quindi eliminiamo la seconda importazione, importala solo una volta

148
00:12:07,780 --> 00:12:09,480
e ora ciò che

149
00:12:09,520 --> 00:12:16,450
otterrai è che questo verrà effettivamente ricaricato, alla fine genera un errore e puoi premere riprovare per ricaricare questo, tuttavia vediamo

150
00:12:16,460 --> 00:12:20,810
sempre il messaggio di errore semplicemente perché non cancelliamo mai l'errore e se

151
00:12:20,840 --> 00:12:22,850
abbiamo un errore, lo restituiamo sempre,

152
00:12:22,850 --> 00:12:25,220
non lo facciamo nemmeno al caricamento filatore.

153
00:12:25,220 --> 00:12:31,010
Quindi dovremmo assicurarci che ogni volta che cariciamo i nostri prodotti qui, riportiamo

154
00:12:31,010 --> 00:12:36,780
l'errore su null, quindi resettiamo l'errore. A proposito, più chiamate di stato impostate una accanto all'altra saranno raggruppate

155
00:12:36,800 --> 00:12:39,550
insieme da React, quindi questo non porterà a cicli di ricalcolo di

156
00:12:39,560 --> 00:12:41,730
più componenti, va bene usarlo in questo modo.

157
00:12:41,750 --> 00:12:46,490
Quindi ora con quello se clicco riprovare, possiamo riprovare. Ovviamente non ci riuscirà mai perché il nostro

158
00:12:46,490 --> 00:12:53,540
URL è rotto ma comunque, è così che possiamo gestire questo errore. Tuttavia, tornerò alle mie azioni e risolverò l'errore correggendo

159
00:12:53,540 --> 00:12:57,610
di nuovo questo URL e ora anche questo dovrebbe caricare

160
00:12:57,740 --> 00:13:00,560
correttamente i nostri dati e visualizzarli.