1 00:00:02,130 --> 00:00:06,200 Wenn wir jetzt eine Bestellung speichern, wäre es natürlich auch schön, wenn wir 2 00:00:06,210 --> 00:00:11,640 hier einen kleinen Dreh sehen würden, wenn wir auf die Schaltfläche "Jetzt bestellen" klicken, bis dies erledigt ist 3 00:00:11,640 --> 00:00:16,030 und wir dies auch implementieren können. Wir müssen nur zum Warenkorbbildschirm gehen Wo wir 4 00:00:16,050 --> 00:00:20,800 diese Aktion versenden, um eine Bestellung zu senden, versenden wir hier und jetzt versenden wir hier 5 00:00:20,970 --> 00:00:29,020 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 6 00:00:29,020 --> 00:00:33,580 a zurückgeben Versprechen am Ende dank unserer Änderung, so dass der Versand daher ein Versprechen 7 00:00:33,580 --> 00:00:36,780 zurückgibt, so dass wir hier unseren Ladezustand kontrollieren können. 8 00:00:36,940 --> 00:00:41,590 Um dies ein wenig lesbarer zu machen, werde ich es hier aus 9 00:00:41,590 --> 00:00:46,150 dieser anonymen Funktion herausschieben und tatsächlich eine neue Funktion erstellen, die 10 00:00:46,160 --> 00:00:53,590 in einer Konstanten hier in meiner Komponente, aber außerhalb des jsx-Baums gespeichert ist, und diesen Sendeauftrags-Handler oder benennen so etwas. 11 00:00:53,660 --> 00:00:56,440 Das ist die gleiche Funktion, die ich zuvor 12 00:00:56,510 --> 00:01:04,520 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 13 00:01:04,520 --> 00:01:10,400 hinzufügen ein Versprechen zurück, wie gesagt. Der Versand gibt daher ein Versprechen zurück, sodass wir hier asynchron hinzufügen 14 00:01:10,400 --> 00:01:16,440 können dass wir wieder async verwenden können, warten und verwalten das Laden und möglicherweise auch den Fehlerzustand wie zuvor. 15 00:01:16,460 --> 00:01:23,940 Wir müssen also nur den Nutzungsstatus aus React importieren und daher unseren Status erneut initialisieren. 16 00:01:23,940 --> 00:01:33,150 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, 17 00:01:33,150 --> 00:01:33,800 können 18 00:01:33,810 --> 00:01:39,810 Sie auch die Fehlerbehandlung auf die gleiche Weise hinzufügen, wie wir es zuvor mit use state error getan 19 00:01:39,810 --> 00:01:43,610 haben, vielleicht use effect Um dann eine Warnung usw. anzuzeigen, konzentriere 20 00:01:43,650 --> 00:01:45,530 ich mich auf den Ladeteil. 21 00:01:45,690 --> 00:01:47,970 Also, jetzt hier im Send Order 22 00:01:48,000 --> 00:01:50,970 Handler, werde ich set isLoading aufrufen und dies 23 00:01:51,210 --> 00:01:56,610 auf true setzen, dann warten wir auf diesen Versand, also warten wir, bis dieses 24 00:01:56,610 --> 00:02:02,760 Versprechen beendet ist, und wieder verpackt dies die Teile danach unsichtbar in einen then-Block, weil ich danach 25 00:02:02,760 --> 00:02:04,290 wird das Laden 26 00:02:04,290 --> 00:02:10,160 wieder auf false setzen, wir laden nicht mehr und jetzt können wir damit einen Aktivitätsindikator anzeigen. 27 00:02:10,250 --> 00:02:19,880 Importieren wir also den Aktivitätsindikator von React Native hier und ich möchte hier anstelle dieser 28 00:02:19,910 --> 00:02:22,170 Schaltfläche "Jetzt bestellen" 29 00:02:22,190 --> 00:02:30,320 diesen Indikator anzeigen, während ich lade. Hier kann ich also überprüfen, ob isLoading wahr ist. Wenn dies 30 00:02:30,320 --> 00:02:40,100 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 31 00:02:40,150 --> 00:02:45,200 importiert, primär und selbstschließend ist und ansonsten, wenn wir nicht laden, werde ich 32 00:02:45,240 --> 00:02:47,260 diesen Button natürlich zeigen. 33 00:02:47,340 --> 00:02:53,690 Hier möchte ich diese Schaltfläche im anderen Fall rendern und jetzt versuchen wir es. 34 00:02:53,720 --> 00:02:55,370 Speichern wir das, fügen 35 00:02:55,430 --> 00:02:59,030 Sie dies der Karte vielleicht zweimal hinzu, klicken Sie auf Jetzt 36 00:02:59,150 --> 00:03:06,560 bestellen, wir haben den Spinner hier für den Bruchteil einer Sekunde gesehen und jetzt, wenn wir uns Bestellungen ansehen, hier ist unsere Bestellung. 37 00:03:06,560 --> 00:03:10,250 Stellen wir nun sicher, dass die Bestellungen auch geladen werden, wenn wir den Bildschirm besuchen.