1
00:00:02,200 --> 00:00:06,570
Bevor wir mit dem Aktualisieren oder Bearbeiten der Daten oder dem Löschen fortfahren, stellen

2
00:00:06,680 --> 00:00:10,810
wir jedoch sicher, dass die Dummy-Daten hier zunächst nicht angezeigt werden, sondern dass

3
00:00:10,810 --> 00:00:16,660
tatsächlich ein Ladespinner und möglicherweise auch eine Meldung angezeigt werden, wenn keine Daten geladen werden müssen oder eine

4
00:00:16,840 --> 00:00:19,810
Fehlermeldung, wenn wir einen Fehler haben und dafür beginnen

5
00:00:19,810 --> 00:00:23,400
wir mit dem Ladespinner. Auf dem Produktübersichtsbildschirm möchte ich einen

6
00:00:23,470 --> 00:00:28,270
Ladespinner anzeigen, während wir auf das Eintreffen von Daten warten. Dazu müssen wir zunächst wissen, ob

7
00:00:28,270 --> 00:00:32,430
wir laden oder nicht, und wir können dies mit dem Verwendungsstatus steuern, also

8
00:00:32,440 --> 00:00:34,850
mit einem internen Status in dieser Komponente.

9
00:00:35,140 --> 00:00:42,910
Dort können wir also isLoading hinzufügen und isLoading setzen und dann einfach den Status hier so verwenden, und anfangs laden wir nicht, also

10
00:00:42,910 --> 00:00:45,890
setze ich den Anfangszustand auf false und jetzt

11
00:00:46,630 --> 00:00:51,610
hier, wenn wir dies versenden, also hier im Gebrauchseffekt, setze ich isLoading to true

12
00:00:51,610 --> 00:00:56,130
natürlich, aber wenn wir fertig sind, möchte ich es wieder auf false setzen.

13
00:00:56,170 --> 00:01:03,610
Jetzt ist das Gute, dass der Versand hier unsere Aktion zum Abrufen von Produkten versendet, und daher gibt uns dies hier tatsächlich ein Versprechen,

14
00:01:03,610 --> 00:01:04,780
sodass ich hier

15
00:01:04,840 --> 00:01:10,690
dann hinzufügen und später auch für die Fehlerbehandlung fangen kann, um etwas zu tun, sobald dies erledigt ist.

16
00:01:10,870 --> 00:01:15,670
Sie können auch async await verwenden, aber es ist nicht zulässig, es

17
00:01:15,670 --> 00:01:20,910
hier im Verwendungseffekt so zu verwenden. So sollte der Verwendungseffekt nicht einfach verwendet werden.

18
00:01:20,910 --> 00:01:25,910
Wenn Sie hier also asynchron verwenden möchten, müssen Sie dies in eine separate

19
00:01:25,910 --> 00:01:32,720
Funktion einbinden, die Sie in Ihrem Effekt erstellen müssen, z. B. Produkte laden, die nur eine Dummy-Wrapper-Funktion

20
00:01:32,720 --> 00:01:37,350
ist, die so aussieht, möglicherweise mit set isLoading in dort genauso.

21
00:01:37,350 --> 00:01:43,530
Jetzt können Sie hier Async hinzufügen und jetzt können Sie direkt danach Ladeprodukte wie diese aufrufen, einfach einen Wrapper,

22
00:01:43,530 --> 00:01:46,530
der aufgrund der Funktionsweise des Verwendungseffekts erforderlich ist. Er

23
00:01:46,530 --> 00:01:48,260
darf kein Versprechen zurückgeben.

24
00:01:48,300 --> 00:01:54,030
Dies würde der Fall sein, wenn Sie hier und Async verwenden Daher ist die Verwendung von Async

25
00:01:54,030 --> 00:01:55,940
nicht zulässig, dies ist jedoch zulässig.

26
00:01:55,950 --> 00:01:57,520
Jetzt können wir

27
00:01:57,540 --> 00:02:03,060
hier warten, um auf diesen Versand zu warten. Dies bedeutet, dass dies automatisch auf

28
00:02:03,060 --> 00:02:08,670
das darin enthaltene Versprechen wartet, also auf die HTTP-Anforderung, und danach setzen wir isLoading auf

29
00:02:08,670 --> 00:02:10,300
false, sobald dies erledigt ist.

30
00:02:10,710 --> 00:02:16,380
Um nun einen Spinner zu zeigen, hat React Native dankenswerterweise einen für uns, den Aktivitätsindikator, der

31
00:02:16,380 --> 00:02:18,810
automatisch für iOS und Android gut

32
00:02:18,840 --> 00:02:21,950
aussieht, sodass er automatisch den Standardplattformstil erhält, und jetzt

33
00:02:22,320 --> 00:02:27,630
können wir diesen rendern, wenn wir laden. Anstatt die flache Liste zurückzugeben,

34
00:02:27,630 --> 00:02:34,740
werde ich, wenn isLoading wahr ist, ein anderes Stück jsx zurückgeben. Ich werde hier

35
00:02:34,740 --> 00:02:42,040
eine neue Ansicht mit meinem Aktivitätsindikator zurückgeben. Dazu muss natürlich auch die Ansicht importiert werden, stellen Sie also sicher, dass diese auch verfügbar ist.

36
00:02:44,480 --> 00:02:49,370
Nachdem wir diese Ansicht mit dem Aktivitätsindikator zurückgegeben haben, können Sie die Größe

37
00:02:49,380 --> 00:02:58,310
so einstellen, dass sie groß und die Farbe farbig ist. Zum Beispiel primär, und dies erfordert natürlich, dass die Farbkonstante importiert wird. Stellen

38
00:02:58,310 --> 00:03:05,830
Sie also sicher, dass diese verfügbar ist, und nicht zuletzt möchte ich diesen Indikator jetzt zentrieren, damit wir hier einen Stil hinzufügen

39
00:03:05,830 --> 00:03:10,960
können, den wir natürlich festlegen können Wenn Sie ein Stylesheet verwenden oder hier schnell und

40
00:03:11,020 --> 00:03:18,880
schmutzig sind, können Sie das Inhaltscenter ausrichten und das Elementcenter ausrichten. Allerdings werde ich hier ein Stylesheet verwenden, da

41
00:03:18,880 --> 00:03:23,010
wir das später auch an einer anderen Stelle benötigen.

42
00:03:23,110 --> 00:03:33,450
Hier beziehe ich mich also auf Stile, sagen wir, zentriert und Stylesheet aus React Native importieren,

43
00:03:33,450 --> 00:03:41,640
und gehe dann nach unten, füge mein Styles-Objekt hinzu, nachdem ich die Navigationsoptionen

44
00:03:41,640 --> 00:03:50,890
eingerichtet habe, vielleicht Stylesheets mit Stylesheet. Erstellen Sie, fügen Sie dort die zentrierte Eigenschaft hinzu, die dieses Styling

45
00:03:50,890 --> 00:03:57,450
mit flexiblen Elementen zum Ausrichten von Inhalten hat, und jetzt sollten wir beim Laden eine zentrierte Aktivitätsanzeige sehen.

46
00:03:57,570 --> 00:04:03,790
Wenn ich dies und dieses Nachladen speichere, ist Firebase sehr schnell, so dass Sie es nicht so lange sehen, aber

47
00:04:03,790 --> 00:04:09,580
für kurze Zeit sehen Sie diesen Ladespinner hier, natürlich mit dem unterschiedlichen Aussehen auf iOS und Android.

48
00:04:12,900 --> 00:04:19,110
Jetzt ist das Laden natürlich eine Sache, manchmal haben Sie auch einfach keine Daten, die geladen werden könnten. Nehmen wir an, wir setzen

49
00:04:19,110 --> 00:04:25,740
bei einem Reduzierer auf das Produkt. json ist eine Quelle, aus der keine Daten abgerufen werden

50
00:04:25,740 --> 00:04:28,750
können, und daher wird ein leerer Bildschirm angezeigt.

51
00:04:29,150 --> 00:04:32,920
Nun, das können wir tun, aber es ist nicht die

52
00:04:33,060 --> 00:04:39,540
bestmögliche Benutzererfahrung. Daher möchte ich eine weitere hinzufügen, wenn überprüft wird, ob isLoading falsch ist. Wenn wir also nicht

53
00:04:41,530 --> 00:04:48,190
mehr laden und meine Produkte hier sind, entspricht die Länge dort Null, was bedeutet, dass wir keine Produkte haben.

54
00:04:48,190 --> 00:04:54,340
In diesem Fall werde ich auch meinen zentrierten Inhalt hier zurückgeben, aber dort möchte ich

55
00:04:54,340 --> 00:04:58,230
einfach einen Text ausgeben, in dem ich sage, dass

56
00:04:58,240 --> 00:05:08,530
keine Produkte gefunden wurden, vielleicht einige hinzufügen und dafür müssen Sie natürlich sicherstellen, dass Sie die Textkomponente und Sie importieren Sie können dort auch Ihre

57
00:05:08,530 --> 00:05:15,880
Schriftstile zuweisen oder eine Standard-Text-Wrapper-Komponente erstellen, die wir in früheren Modulen verwendet haben. Im Moment habe ich nur

58
00:05:15,880 --> 00:05:17,140
meinen Text

59
00:05:17,140 --> 00:05:22,900
so, und das sehen wir dort vorerst. Sobald ich dies wieder auf die richtige

60
00:05:22,900 --> 00:05:31,360
URL umschalte, unter der wir tatsächlich Daten finden, funktioniert es natürlich. Zu guter Letzt könnten Sie auch einen Fehler

61
00:05:31,360 --> 00:05:33,680
haben. Sagen wir hier, ich

62
00:05:33,700 --> 00:05:35,850
habe nicht. json da,

63
00:05:35,860 --> 00:05:41,610
natürlich ist das ein Fehler, den wir normalerweise vermeiden würden, weil das nur ein Tippfehler auf

64
00:05:41,620 --> 00:05:48,010
unserer Seite ist, aber leider sind Firebase-Server relativ robust. Um zu fälschen, dass sie zum Beispiel ausgefallen sind oder etwas schief

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

66
00:05:48,550 --> 00:05:54,850
ist, werde ich die URL einfach auf diese Weise brechen, was eine ungültige URL ist und was wir jetzt sehen, ist ein unendlicher Spinner.

67
00:05:55,120 --> 00:06:04,340
Der Grund dafür ist, dass wir jetzt tatsächlich keine gültige Antwort haben. Wenn wir uns also unsere Aktion hier ansehen und diese Antwortdaten hier

68
00:06:04,340 --> 00:06:10,490
in der Konsole protokollieren, sehen wir, dass beim erneuten Laden das Abrufen sofort richtig erfolgen sollte, aber

69
00:06:14,420 --> 00:06:16,220
wir dort keine Ausgabe erhalten

70
00:06:19,170 --> 00:06:20,950
und nichts protokolliert

71
00:06:21,060 --> 00:06:23,130
wird In diesem Fall erhalten wir

72
00:06:23,160 --> 00:06:29,760
zu einem bestimmten Zeitpunkt nur eine Warnung zur Ablehnung eines Versprechens. Es sieht also so aus, als würden

73
00:06:29,970 --> 00:06:32,470
wir einfach einen Fehler erhalten und im

74
00:06:32,820 --> 00:06:34,870
Moment behandeln wir keinen Fehler.

75
00:06:34,890 --> 00:06:39,990
Wenn Sie jetzt Versprechen verwenden würden, ohne asynchron zu warten, würden Sie einfach eine catch-Anweisung hinzufügen.

76
00:06:39,990 --> 00:06:41,720
Hier verwenden wir

77
00:06:41,720 --> 00:06:48,660
async await. Wir verpacken dies also in einen try-Block, den gesamten Code, den wir letztendlich ausführen

78
00:06:48,660 --> 00:06:52,960
möchten, wenn alles erfolgreich ist, und fangen hier Fehler

79
00:06:52,960 --> 00:06:57,340
ab, also einen try catch-Block. Hier erhalten wir einen potenziellen Fehler, und

80
00:06:57,340 --> 00:07:00,820
jetzt, da dieser Fehler hier aufgetreten ist, können wir ihn behandeln,

81
00:07:00,820 --> 00:07:06,460
z. B. an unseren eigenen Analyseserver senden oder tun, was wir wollen, und ihn dann möglicherweise auch erneut werfen,

82
00:07:06,670 --> 00:07:11,740
natürlich, wenn Sie nur das tun, was Sie tun Wenn Sie es erneut werfen, hätten Sie diesen

83
00:07:11,740 --> 00:07:17,080
Try-Catch-Block nicht hinzufügen müssen, aber normalerweise möchten Sie hier möglicherweise mehr tun - an einen benutzerdefinierten Analyseserver senden

84
00:07:17,080 --> 00:07:18,930
oder ähnliches, wie bereits erwähnt.

85
00:07:19,150 --> 00:07:23,800
Jetzt werfen wir den Fehler erneut, immer noch nicht besser, verursachen immer

86
00:07:23,860 --> 00:07:29,890
noch einen Fehler, und zusätzlich zu dem Versuch, dies zu umgehen, sollten wir hier auch eine

87
00:07:29,890 --> 00:07:32,890
weitere Überprüfung hinzufügen, bevor wir den Antworttext

88
00:07:32,890 --> 00:07:38,770
entpacken. Wir sollten auch überprüfen, ob die Antwort vorliegt okay ist falsch, wenn das falsch ist.

89
00:07:38,770 --> 00:07:44,670
OK ist ein Feld, das Sie für dieses Antwortobjekt verfügbar haben, und dies ist einfach wahr, wenn

90
00:07:44,680 --> 00:07:50,800
die Antwort im Bereich von 200 Statuscodes liegt. Wenn es sich in einem anderen Bereich befindet, z.

91
00:07:50,800 --> 00:07:55,360
B. weil Sie nicht authentifiziert sind oder ähnliches, gibt die Abruf-API standardmäßig keinen Fehler aus.

92
00:07:55,360 --> 00:08:01,000
In diesem Fall möchte ich jedoch einen Fehler auslösen, damit wir immer im catch-Block landen, wenn wir

93
00:08:01,450 --> 00:08:07,780
einen 400- oder 500-Statuscode haben oder wenn wir ein Netzwerkanforderungsproblem haben, zum Beispiel, wenn die Anforderung nicht einmal das verlassen

94
00:08:07,780 --> 00:08:08,790
kann Gerät.

95
00:08:08,980 --> 00:08:15,250
Also hier und das ist eine Abruf-API, die auch für die Behandlung von 400- und 500-Statuscodes spezifisch ist und normalerweise

96
00:08:15,250 --> 00:08:16,590
keinen Fehler verursacht.

97
00:08:16,600 --> 00:08:21,350
Ich werde hier auch einen neuen Fehler auslösen, wenn ich sage, dass etwas schief gelaufen

98
00:08:21,370 --> 00:08:27,850
ist. Natürlich könnten Sie in die Antwortkörper auch hier in diesem Fall und finde heraus, was dort falsch ist, aber ich

99
00:08:28,150 --> 00:08:32,910
werde nur diesen generischen Fehler werfen und jetzt werden wir definitiv einen Fehler haben, wenn

100
00:08:32,920 --> 00:08:38,750
etwas schief geht, wenn wir unsere Daten nicht zurückbekommen, aber trotzdem, wir dann einfach Wirf den Fehler hier erneut.

101
00:08:38,770 --> 00:08:43,020
Aber der Ort, an dem ich letztendlich damit umgehen möchte, ist meine Komponente

102
00:08:43,030 --> 00:08:50,640
hier, meine Bildschirmkomponente, da ich dort dann eine Fehlermeldung anzeigen möchte. Wir haben also unseren Effekt und genau wie wir

103
00:08:50,830 --> 00:08:58,330
catch oder den catch-Handler verwenden könnten, wenn Sie dann verwenden und catch oder async mit try catch in der

104
00:08:58,330 --> 00:08:59,860
Aktion warten, können

105
00:08:59,920 --> 00:09:01,800
wir dies auch hier tun.

106
00:09:01,840 --> 00:09:09,380
Hier möchte ich versuchen, dies zu versenden, aber ich möchte mögliche Fehler abfangen, die möglicherweise auftreten.

107
00:09:09,400 --> 00:09:10,830
Hier fange ich also

108
00:09:10,840 --> 00:09:16,810
alle Fehler auf, die sich daraus ergeben könnten, und da ich meinen Fehler dort wieder einwerfe, habe ich das gerade hier

109
00:09:16,840 --> 00:09:19,370
getan, richtig, letztendlich wird uns der Fehler hier erreichen.

110
00:09:19,400 --> 00:09:22,750
Jetzt landen wir also letztendlich in diesem Catch-Block. Um unsere

111
00:09:23,080 --> 00:09:29,740
Fehlerdaten anzuzeigen, können wir einen weiteren Status hinzufügen - error und set error. Sie können ihn benennen, wie Sie

112
00:09:29,740 --> 00:09:30,250
möchten.

113
00:09:30,340 --> 00:09:38,690
Anfangs ist das undefiniert, weil ich anfangs keinen Fehler habe, aber dann werde ich hier set error aufrufen und dies

114
00:09:38,690 --> 00:09:41,540
auf error setzen. Nachricht zum Beispiel, also

115
00:09:41,540 --> 00:09:43,670
auf die Nachricht dieses Fehlers bekomme ich.

116
00:09:46,500 --> 00:09:51,330
Trotzdem möchte ich das Laden danach auf false setzen, das ändert sich nicht, da wir

117
00:09:51,330 --> 00:09:52,330
definitiv nicht mehr

118
00:09:52,350 --> 00:09:58,920
laden, selbst wenn wir einen Fehler haben, aber jetzt haben wir auch diesen Fehlerzustand, den wir verwenden können, den wir zur

119
00:09:58,920 --> 00:10:01,490
Überprüfung verwenden können hier. Wenn wir

120
00:10:01,500 --> 00:10:08,820
einen Fehler haben, muss ich nicht einmal fortfahren. Stattdessen möchte ich meinen zentrierten jsx-Inhalt hier zurückgeben, aber dort möchte

121
00:10:08,820 --> 00:10:10,130
ich nur einen Text

122
00:10:10,140 --> 00:10:18,620
ausgeben, in dem beispielsweise ein Fehler aufgetreten ist , so was. Wenn wir das jetzt tun, werden Sie sehen, dass wir

123
00:10:18,650 --> 00:10:20,290
einen Spinner sehen, aber

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

125
00:10:21,380 --> 00:10:24,990
sehen wir diesen Fehlertext. Dies erlaubt dem Benutzer natürlich nicht viel zu

126
00:10:24,990 --> 00:10:27,800
tun. Wir können jetzt einfach weg navigieren und dann zurückkehren, aber wir möchten

127
00:10:29,820 --> 00:10:36,820
dem Benutzer möglicherweise eine Möglichkeit geben, es erneut zu versuchen, indem wir hier möglicherweise eine Schaltfläche hinzufügen. Jetzt können wir hier mit importierten Schaltflächen dorthin

128
00:10:36,820 --> 00:10:45,860
gehen und dann diese Schaltflächenkomponente mit dem Titel "Erneut versuchen" hinzufügen. Natürlich liegt es ganz bei Ihnen, wie Sie den Benutzer damit

129
00:10:45,870 --> 00:10:49,810
umgehen lassen möchten, und dort können Sie einen onPress-Handler und

130
00:10:49,920 --> 00:10:55,260
hinzufügen Um nun wieder laden zu können, nehme ich diese Funktion zum Laden

131
00:10:55,350 --> 00:10:58,770
von Produkten hier, verschiebe sie aus dem Effekt

132
00:10:58,770 --> 00:11:04,290
und mache sie zu einer regulären Funktion dieser Komponente, damit ich sie vom Inside-Use-Effekt

133
00:11:04,290 --> 00:11:06,030
aus aufrufen kann.

134
00:11:06,090 --> 00:11:10,740
Jetzt muss es jedoch auch eine Abhängigkeit sein. Um eine Endlosschleife zu vermeiden, sollte

135
00:11:10,800 --> 00:11:19,350
sie in einen Rückruf für die Verwendung eingeschlossen werden. Importieren Sie also den Rückruf für die Verwendung hier und umschließen Sie diese Funktion hier, wo die

136
00:11:19,350 --> 00:11:20,920
Abhängigkeit dann meine Versandfunktion

137
00:11:20,980 --> 00:11:21,870
ist. Sie

138
00:11:21,870 --> 00:11:23,760
können dies auch add set

139
00:11:23,800 --> 00:11:27,600
isLoading und set error, aber all diese Funktionen werden sich nie

140
00:11:27,640 --> 00:11:32,440
ändern, daher können Sie sie auch weglassen und daher wird dies nie neu erstellt,

141
00:11:32,440 --> 00:11:34,480
was gut ist, aber jetzt können

142
00:11:34,630 --> 00:11:37,930
wir Ladeprodukte als Abhängigkeit hier im Gebrauchseffekt verwenden und jetzt,

143
00:11:37,960 --> 00:11:43,120
da es nicht im Inneren ist Von der Use-Effect-Funktion können wir Ladeprodukte an einer anderen Stelle

144
00:11:43,120 --> 00:11:45,750
in dieser Komponente verwenden, und der an anderer

145
00:11:45,750 --> 00:11:51,700
Stelle befindliche Teil ist hier diese Schaltfläche. Wenn wir diese Taste drücken, möchte ich auch Ladeprodukte erneut auslösen

146
00:11:52,000 --> 00:12:02,260
und zu guter Letzt die Schaltfläche geben Farbe der Farben. primär. Es sieht so aus, als hätte ich hier einen Fehler bei

147
00:12:02,260 --> 00:12:07,590
meinen Importen. Ja, ich hatte bereits eine Schaltfläche importiert. Lassen Sie uns also den zweiten Import loswerden, importieren

148
00:12:07,780 --> 00:12:09,480
Sie ihn nur einmal und

149
00:12:09,520 --> 00:12:16,450
jetzt erhalten Sie, dass dieser schließlich tatsächlich neu geladen wird Wenn Sie einen Fehler auslösen, können Sie erneut versuchen, dies zu laden. Wir sehen

150
00:12:16,460 --> 00:12:20,810
jedoch immer die Fehlermeldung, nur weil wir den Fehler nie beheben. Wenn wir einen Fehler

151
00:12:20,840 --> 00:12:22,850
haben, geben wir diesen immer zurück

152
00:12:22,850 --> 00:12:25,220
und schaffen es nicht einmal zum Laden Spinner.

153
00:12:25,220 --> 00:12:31,010
Wir sollten also sicherstellen, dass wir den Fehler bei jedem Laden unserer Produkte auf null

154
00:12:31,010 --> 00:12:36,780
zurücksetzen, damit wir den Fehler zurücksetzen. Übrigens werden mehrere Set-Status-Aufrufe nebeneinander von React gestapelt, sodass

155
00:12:36,800 --> 00:12:39,550
dies nicht zu mehreren Komponenten-Rendering-Zyklen führt. Es ist

156
00:12:39,560 --> 00:12:41,730
in Ordnung, sie so zu verwenden.

157
00:12:41,750 --> 00:12:46,490
Wenn ich jetzt auf "Nochmals versuchen" klicke, können wir es erneut versuchen. Natürlich wird es nie gelingen, weil unsere

158
00:12:46,490 --> 00:12:53,540
URL kaputt ist, aber dennoch können wir diesen Fehler so behandeln. Damit werde ich jedoch zu meinen Aktionen zurückkehren und diesen

159
00:12:53,540 --> 00:12:57,610
Fehler beheben, indem ich diese URL erneut korrigiere. Jetzt sollte dies

160
00:12:57,740 --> 00:13:00,560
auch unsere Daten korrekt laden und anzeigen.