Bevor wir mit dem Aktualisieren oder Bearbeiten der Daten oder dem Löschen fortfahren, stellen
wir jedoch sicher, dass die Dummy-Daten hier zunächst nicht angezeigt werden, sondern dass
tatsächlich ein Ladespinner und möglicherweise auch eine Meldung angezeigt werden, wenn keine Daten geladen werden müssen oder eine
Fehlermeldung, wenn wir einen Fehler haben und dafür beginnen
wir mit dem Ladespinner. Auf dem Produktübersichtsbildschirm möchte ich einen
Ladespinner anzeigen, während wir auf das Eintreffen von Daten warten. Dazu müssen wir zunächst wissen, ob
wir laden oder nicht, und wir können dies mit dem Verwendungsstatus steuern, also
mit einem internen Status in dieser Komponente.
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
setze ich den Anfangszustand auf false und jetzt
hier, wenn wir dies versenden, also hier im Gebrauchseffekt, setze ich isLoading to true
natürlich, aber wenn wir fertig sind, möchte ich es wieder auf false setzen.
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,
sodass ich hier
dann hinzufügen und später auch für die Fehlerbehandlung fangen kann, um etwas zu tun, sobald dies erledigt ist.
Sie können auch async await verwenden, aber es ist nicht zulässig, es
hier im Verwendungseffekt so zu verwenden. So sollte der Verwendungseffekt nicht einfach verwendet werden.
Wenn Sie hier also asynchron verwenden möchten, müssen Sie dies in eine separate
Funktion einbinden, die Sie in Ihrem Effekt erstellen müssen, z. B. Produkte laden, die nur eine Dummy-Wrapper-Funktion
ist, die so aussieht, möglicherweise mit set isLoading in dort genauso.
Jetzt können Sie hier Async hinzufügen und jetzt können Sie direkt danach Ladeprodukte wie diese aufrufen, einfach einen Wrapper,
der aufgrund der Funktionsweise des Verwendungseffekts erforderlich ist. Er
darf kein Versprechen zurückgeben.
Dies würde der Fall sein, wenn Sie hier und Async verwenden Daher ist die Verwendung von Async
nicht zulässig, dies ist jedoch zulässig.
Jetzt können wir
hier warten, um auf diesen Versand zu warten. Dies bedeutet, dass dies automatisch auf
das darin enthaltene Versprechen wartet, also auf die HTTP-Anforderung, und danach setzen wir isLoading auf
false, sobald dies erledigt ist.
Um nun einen Spinner zu zeigen, hat React Native dankenswerterweise einen für uns, den Aktivitätsindikator, der
automatisch für iOS und Android gut
aussieht, sodass er automatisch den Standardplattformstil erhält, und jetzt
können wir diesen rendern, wenn wir laden. Anstatt die flache Liste zurückzugeben,
werde ich, wenn isLoading wahr ist, ein anderes Stück jsx zurückgeben. Ich werde hier
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.
Nachdem wir diese Ansicht mit dem Aktivitätsindikator zurückgegeben haben, können Sie die Größe
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
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
können, den wir natürlich festlegen können Wenn Sie ein Stylesheet verwenden oder hier schnell und
schmutzig sind, können Sie das Inhaltscenter ausrichten und das Elementcenter ausrichten. Allerdings werde ich hier ein Stylesheet verwenden, da
wir das später auch an einer anderen Stelle benötigen.
Hier beziehe ich mich also auf Stile, sagen wir, zentriert und Stylesheet aus React Native importieren,
und gehe dann nach unten, füge mein Styles-Objekt hinzu, nachdem ich die Navigationsoptionen
eingerichtet habe, vielleicht Stylesheets mit Stylesheet. Erstellen Sie, fügen Sie dort die zentrierte Eigenschaft hinzu, die dieses Styling
mit flexiblen Elementen zum Ausrichten von Inhalten hat, und jetzt sollten wir beim Laden eine zentrierte Aktivitätsanzeige sehen.
Wenn ich dies und dieses Nachladen speichere, ist Firebase sehr schnell, so dass Sie es nicht so lange sehen, aber
für kurze Zeit sehen Sie diesen Ladespinner hier, natürlich mit dem unterschiedlichen Aussehen auf iOS und Android.
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
bei einem Reduzierer auf das Produkt. json ist eine Quelle, aus der keine Daten abgerufen werden
können, und daher wird ein leerer Bildschirm angezeigt.
Nun, das können wir tun, aber es ist nicht die
bestmögliche Benutzererfahrung. Daher möchte ich eine weitere hinzufügen, wenn überprüft wird, ob isLoading falsch ist. Wenn wir also nicht
mehr laden und meine Produkte hier sind, entspricht die Länge dort Null, was bedeutet, dass wir keine Produkte haben.
In diesem Fall werde ich auch meinen zentrierten Inhalt hier zurückgeben, aber dort möchte ich
einfach einen Text ausgeben, in dem ich sage, dass
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
Schriftstile zuweisen oder eine Standard-Text-Wrapper-Komponente erstellen, die wir in früheren Modulen verwendet haben. Im Moment habe ich nur
meinen Text
so, und das sehen wir dort vorerst. Sobald ich dies wieder auf die richtige
URL umschalte, unter der wir tatsächlich Daten finden, funktioniert es natürlich. Zu guter Letzt könnten Sie auch einen Fehler
haben. Sagen wir hier, ich
habe nicht. json da,
natürlich ist das ein Fehler, den wir normalerweise vermeiden würden, weil das nur ein Tippfehler auf
unserer Seite ist, aber leider sind Firebase-Server relativ robust. Um zu fälschen, dass sie zum Beispiel ausgefallen sind oder etwas schief
gelaufen
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.
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
in der Konsole protokollieren, sehen wir, dass beim erneuten Laden das Abrufen sofort richtig erfolgen sollte, aber
wir dort keine Ausgabe erhalten
und nichts protokolliert
wird In diesem Fall erhalten wir
zu einem bestimmten Zeitpunkt nur eine Warnung zur Ablehnung eines Versprechens. Es sieht also so aus, als würden
wir einfach einen Fehler erhalten und im
Moment behandeln wir keinen Fehler.
Wenn Sie jetzt Versprechen verwenden würden, ohne asynchron zu warten, würden Sie einfach eine catch-Anweisung hinzufügen.
Hier verwenden wir
async await. Wir verpacken dies also in einen try-Block, den gesamten Code, den wir letztendlich ausführen
möchten, wenn alles erfolgreich ist, und fangen hier Fehler
ab, also einen try catch-Block. Hier erhalten wir einen potenziellen Fehler, und
jetzt, da dieser Fehler hier aufgetreten ist, können wir ihn behandeln,
z. B. an unseren eigenen Analyseserver senden oder tun, was wir wollen, und ihn dann möglicherweise auch erneut werfen,
natürlich, wenn Sie nur das tun, was Sie tun Wenn Sie es erneut werfen, hätten Sie diesen
Try-Catch-Block nicht hinzufügen müssen, aber normalerweise möchten Sie hier möglicherweise mehr tun - an einen benutzerdefinierten Analyseserver senden
oder ähnliches, wie bereits erwähnt.
Jetzt werfen wir den Fehler erneut, immer noch nicht besser, verursachen immer
noch einen Fehler, und zusätzlich zu dem Versuch, dies zu umgehen, sollten wir hier auch eine
weitere Überprüfung hinzufügen, bevor wir den Antworttext
entpacken. Wir sollten auch überprüfen, ob die Antwort vorliegt okay ist falsch, wenn das falsch ist.
OK ist ein Feld, das Sie für dieses Antwortobjekt verfügbar haben, und dies ist einfach wahr, wenn
die Antwort im Bereich von 200 Statuscodes liegt. Wenn es sich in einem anderen Bereich befindet, z.
B. weil Sie nicht authentifiziert sind oder ähnliches, gibt die Abruf-API standardmäßig keinen Fehler aus.
In diesem Fall möchte ich jedoch einen Fehler auslösen, damit wir immer im catch-Block landen, wenn wir
einen 400- oder 500-Statuscode haben oder wenn wir ein Netzwerkanforderungsproblem haben, zum Beispiel, wenn die Anforderung nicht einmal das verlassen
kann Gerät.
Also hier und das ist eine Abruf-API, die auch für die Behandlung von 400- und 500-Statuscodes spezifisch ist und normalerweise
keinen Fehler verursacht.
Ich werde hier auch einen neuen Fehler auslösen, wenn ich sage, dass etwas schief gelaufen
ist. Natürlich könnten Sie in die Antwortkörper auch hier in diesem Fall und finde heraus, was dort falsch ist, aber ich
werde nur diesen generischen Fehler werfen und jetzt werden wir definitiv einen Fehler haben, wenn
etwas schief geht, wenn wir unsere Daten nicht zurückbekommen, aber trotzdem, wir dann einfach Wirf den Fehler hier erneut.
Aber der Ort, an dem ich letztendlich damit umgehen möchte, ist meine Komponente
hier, meine Bildschirmkomponente, da ich dort dann eine Fehlermeldung anzeigen möchte. Wir haben also unseren Effekt und genau wie wir
catch oder den catch-Handler verwenden könnten, wenn Sie dann verwenden und catch oder async mit try catch in der
Aktion warten, können
wir dies auch hier tun.
Hier möchte ich versuchen, dies zu versenden, aber ich möchte mögliche Fehler abfangen, die möglicherweise auftreten.
Hier fange ich also
alle Fehler auf, die sich daraus ergeben könnten, und da ich meinen Fehler dort wieder einwerfe, habe ich das gerade hier
getan, richtig, letztendlich wird uns der Fehler hier erreichen.
Jetzt landen wir also letztendlich in diesem Catch-Block. Um unsere
Fehlerdaten anzuzeigen, können wir einen weiteren Status hinzufügen - error und set error. Sie können ihn benennen, wie Sie
möchten.
Anfangs ist das undefiniert, weil ich anfangs keinen Fehler habe, aber dann werde ich hier set error aufrufen und dies
auf error setzen. Nachricht zum Beispiel, also
auf die Nachricht dieses Fehlers bekomme ich.
Trotzdem möchte ich das Laden danach auf false setzen, das ändert sich nicht, da wir
definitiv nicht mehr
laden, selbst wenn wir einen Fehler haben, aber jetzt haben wir auch diesen Fehlerzustand, den wir verwenden können, den wir zur
Überprüfung verwenden können hier. Wenn wir
einen Fehler haben, muss ich nicht einmal fortfahren. Stattdessen möchte ich meinen zentrierten jsx-Inhalt hier zurückgeben, aber dort möchte
ich nur einen Text
ausgeben, in dem beispielsweise ein Fehler aufgetreten ist , so was. Wenn wir das jetzt tun, werden Sie sehen, dass wir
einen Spinner sehen, aber
dann
sehen wir diesen Fehlertext. Dies erlaubt dem Benutzer natürlich nicht viel zu
tun. Wir können jetzt einfach weg navigieren und dann zurückkehren, aber wir möchten
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
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
umgehen lassen möchten, und dort können Sie einen onPress-Handler und
hinzufügen Um nun wieder laden zu können, nehme ich diese Funktion zum Laden
von Produkten hier, verschiebe sie aus dem Effekt
und mache sie zu einer regulären Funktion dieser Komponente, damit ich sie vom Inside-Use-Effekt
aus aufrufen kann.
Jetzt muss es jedoch auch eine Abhängigkeit sein. Um eine Endlosschleife zu vermeiden, sollte
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
Abhängigkeit dann meine Versandfunktion
ist. Sie
können dies auch add set
isLoading und set error, aber all diese Funktionen werden sich nie
ändern, daher können Sie sie auch weglassen und daher wird dies nie neu erstellt,
was gut ist, aber jetzt können
wir Ladeprodukte als Abhängigkeit hier im Gebrauchseffekt verwenden und jetzt,
da es nicht im Inneren ist Von der Use-Effect-Funktion können wir Ladeprodukte an einer anderen Stelle
in dieser Komponente verwenden, und der an anderer
Stelle befindliche Teil ist hier diese Schaltfläche. Wenn wir diese Taste drücken, möchte ich auch Ladeprodukte erneut auslösen
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
meinen Importen. Ja, ich hatte bereits eine Schaltfläche importiert. Lassen Sie uns also den zweiten Import loswerden, importieren
Sie ihn nur einmal und
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
jedoch immer die Fehlermeldung, nur weil wir den Fehler nie beheben. Wenn wir einen Fehler
haben, geben wir diesen immer zurück
und schaffen es nicht einmal zum Laden Spinner.
Wir sollten also sicherstellen, dass wir den Fehler bei jedem Laden unserer Produkte auf null
zurücksetzen, damit wir den Fehler zurücksetzen. Übrigens werden mehrere Set-Status-Aufrufe nebeneinander von React gestapelt, sodass
dies nicht zu mehreren Komponenten-Rendering-Zyklen führt. Es ist
in Ordnung, sie so zu verwenden.
Wenn ich jetzt auf "Nochmals versuchen" klicke, können wir es erneut versuchen. Natürlich wird es nie gelingen, weil unsere
URL kaputt ist, aber dennoch können wir diesen Fehler so behandeln. Damit werde ich jedoch zu meinen Aktionen zurückkehren und diesen
Fehler beheben, indem ich diese URL erneut korrigiere. Jetzt sollte dies
auch unsere Daten korrekt laden und anzeigen.