Wenn wir jetzt eine Bestellung speichern, wäre es natürlich auch schön, wenn wir
hier einen kleinen Dreh sehen würden, wenn wir auf die Schaltfläche "Jetzt bestellen" klicken, bis dies erledigt ist
und wir dies auch implementieren können. Wir müssen nur zum Warenkorbbildschirm gehen Wo wir
diese Aktion versenden, um eine Bestellung zu senden, versenden wir hier und jetzt versenden wir hier
natürlich ein Versprechen am Ende, richtig, weil aus dem Warenkorb entfernen, was der Fall ist, wenn wir auf diese Schaltfläche klicken und bestellen, Bestellung hinzufügen wird
a zurückgeben Versprechen am Ende dank unserer Änderung, so dass der Versand daher ein Versprechen
zurückgibt, so dass wir hier unseren Ladezustand kontrollieren können.
Um dies ein wenig lesbarer zu machen, werde ich es hier aus
dieser anonymen Funktion herausschieben und tatsächlich eine neue Funktion erstellen, die
in einer Konstanten hier in meiner Komponente, aber außerhalb des jsx-Baums gespeichert ist, und diesen Sendeauftrags-Handler oder benennen so etwas.
Das ist die gleiche Funktion, die ich zuvor
verwendet habe. Jetzt kümmere ich mich nur noch um den Handler für das Senden von Bestellungen. Jetzt ist die Idee einfach. Hier gibt die Bestellung
hinzufügen ein Versprechen zurück, wie gesagt. Der Versand gibt daher ein Versprechen zurück, sodass wir hier asynchron hinzufügen
können dass wir wieder async verwenden können, warten und verwalten das Laden und möglicherweise auch den Fehlerzustand wie zuvor.
Wir müssen also nur den Nutzungsstatus aus React importieren und daher unseren Status erneut initialisieren.
Hier haben wir also isLoading und setzen isLoading und anfangs ist das falsch und wenn Sie wollen, was ich hier nicht tun werde, aber wenn Sie wollen,
können
Sie auch die Fehlerbehandlung auf die gleiche Weise hinzufügen, wie wir es zuvor mit use state error getan
haben, vielleicht use effect Um dann eine Warnung usw. anzuzeigen, konzentriere
ich mich auf den Ladeteil.
Also, jetzt hier im Send Order
Handler, werde ich set isLoading aufrufen und dies
auf true setzen, dann warten wir auf diesen Versand, also warten wir, bis dieses
Versprechen beendet ist, und wieder verpackt dies die Teile danach unsichtbar in einen then-Block, weil ich danach
wird das Laden
wieder auf false setzen, wir laden nicht mehr und jetzt können wir damit einen Aktivitätsindikator anzeigen.
Importieren wir also den Aktivitätsindikator von React Native hier und ich möchte hier anstelle dieser
Schaltfläche "Jetzt bestellen"
diesen Indikator anzeigen, während ich lade. Hier kann ich also überprüfen, ob isLoading wahr ist. Wenn dies
der Fall ist, zeige ich meinen Aktivitätsindikator mit einer Größe von beispielsweise klein und einer Farbe von Farben, die Sie benötigen, um sicherzustellen, dass er
importiert, primär und selbstschließend ist und ansonsten, wenn wir nicht laden, werde ich
diesen Button natürlich zeigen.
Hier möchte ich diese Schaltfläche im anderen Fall rendern und jetzt versuchen wir es.
Speichern wir das, fügen
Sie dies der Karte vielleicht zweimal hinzu, klicken Sie auf Jetzt
bestellen, wir haben den Spinner hier für den Bruchteil einer Sekunde gesehen und jetzt, wenn wir uns Bestellungen ansehen, hier ist unsere Bestellung.
Stellen wir nun sicher, dass die Bestellungen auch geladen werden, wenn wir den Bildschirm besuchen.