1 00:00:02,310 --> 00:00:10,050 Bevor wir dieses Modul abschließen, kehren wir zu einigen Listen und zu scrollbaren Inhalten zurück, da wir in dieser Anwendung 2 00:00:10,050 --> 00:00:12,670 überhaupt keine solchen Inhalte haben und 3 00:00:12,690 --> 00:00:18,570 es für Sie von entscheidender Bedeutung ist, zu verstehen, wie Sie mit Listen arbeiten und 4 00:00:18,570 --> 00:00:19,920 welche davon Besondere 5 00:00:19,920 --> 00:00:25,380 Macken sind, wenn es um Listen geht. Nehmen wir also an, wir möchten hier die vorherigen 6 00:00:25,380 --> 00:00:32,060 Vermutungen protokollieren, die der Computer gemacht hat. Wir möchten dies hier unter unserer Plus- und Minus-Schaltfläche in diesem weißen leeren Bereich hier protokollieren. 7 00:00:32,310 --> 00:00:38,910 Dazu müssen wir natürlich alle vom Computer gemachten Vermutungen registrieren und dann in der Liste ausgeben. 8 00:00:38,910 --> 00:00:41,880 Beginnen wir also auf dem Spielbildschirm damit, dies zu registrieren. 9 00:00:41,970 --> 00:00:44,610 Derzeit zählen wir hier nur Runden. Das 10 00:00:44,610 --> 00:00:49,620 Ziel muss jedoch sein, dass wir nicht nur Runden zählen, sondern auch die Runden speichern. Wir 11 00:00:49,650 --> 00:00:52,770 haben also eine Vermutung gespeichert, die in jeder Runde gemacht 12 00:00:52,920 --> 00:00:59,520 wurde, und dies hier in unseren Runden zu erreichen Zustand, wir können einfach ein Array anstelle einer Zahl verwalten und ich 13 00:00:59,520 --> 00:01:03,510 werde diese vergangenen Vermutungen benennen, um wirklich klar zu sein, was dort drin 14 00:01:03,690 --> 00:01:06,690 ist, und dies wird daher als Set Past-Vermutungen bezeichnet. 15 00:01:06,690 --> 00:01:13,390 Das Ziel ist es nun, diesem Array eine neue Vermutung hinzuzufügen, wenn wir eine neue Zufallszahl 16 00:01:13,390 --> 00:01:19,530 generieren, also hier im nächsten Vermutungshandler. Dort, wo wir die Runden setzen, anstatt die 17 00:01:19,560 --> 00:01:23,660 Runden wie diese zu setzen, die wir nicht mehr verwalten, müssen wir 18 00:01:23,790 --> 00:01:30,420 unsere früheren Vermutungen setzen und dort müssen wir unsere vorherigen Vermutungen verwenden und hier tatsächlich eine neue Vermutung hinzufügen. 19 00:01:30,420 --> 00:01:37,540 Jetzt können wir hier dieses Funktionsformular verwenden, in dem wir die curPastGuesses erhalten, die ein bisschen seltsam sind, aber einfach 20 00:01:37,540 --> 00:01:42,790 bedeuten, dass dies unser aktueller Status ist und wir diesen aktualisieren möchten oder es 21 00:01:42,790 --> 00:01:49,810 ist unser neuester Status, um genau zu sein, und wir Ich möchte das aktualisieren und wir möchten es aktualisieren, 22 00:01:50,020 --> 00:01:55,720 indem wir ein neues Array zurückgeben, das unser neuer Status ist. Dies sollte natürlich unsere 23 00:01:56,020 --> 00:01:59,680 aktuellen früheren Vermutungen berücksichtigen und dort neue Vermutungen hinzufügen. 24 00:01:59,690 --> 00:02:04,280 Jetzt können wir entweder am Ende dieser Liste oder am Anfang eine neue Vermutung hinzufügen, und ich werde 25 00:02:04,280 --> 00:02:09,590 sie tatsächlich am Anfang hinzufügen, sodass unsere letzte Vermutung immer ganz oben auf der Liste steht, wenn wir sie später auf dem 26 00:02:09,590 --> 00:02:10,520 Bildschirm rendern . 27 00:02:11,210 --> 00:02:17,600 Hier können wir also die nächste Zahl hinzufügen, die unsere neue aktuelle Vermutung ist, die wir hier 28 00:02:17,600 --> 00:02:25,440 generieren, und das müssen wir hier als Element hinzufügen, oder? Damit fügen wir diesem Array mit jeder Vermutung neue Elemente hinzu. 29 00:02:25,470 --> 00:02:28,760 Vergessen Sie jetzt nicht, dass wir auch mit einer Vermutung 30 00:02:28,770 --> 00:02:31,290 beginnen. Wir generieren hier eine erste Vermutung. Ich 31 00:02:31,290 --> 00:02:36,670 möchte mit dieser Vermutung in der Liste beginnen und daher müssen wir sie hier zur Liste hinzufügen, 32 00:02:36,720 --> 00:02:44,040 damit ich sie extrahieren kann Rufen Sie hier unseren Funktionsaufruf use state auf und erstellen Sie eine neue konstante anfängliche Schätzung, bei der 33 00:02:44,040 --> 00:02:51,910 es sich um diese zufällig generierte Zahl handelt. Jetzt ist es diese anfängliche Schätzung, die ich hier hinzufüge, um state zu verwenden, und es ist 34 00:02:51,910 --> 00:02:57,850 auch die anfängliche Schätzung, die ich als erstes Element zu diesem Array in hinzufüge Verwenden Sie in unseren früheren 35 00:02:57,850 --> 00:02:59,200 Vermutungen die Zustandsinitialisierung. 36 00:02:59,200 --> 00:03:06,260 Vergessen Sie jetzt nicht, dass der Verwendungsstatus hier erneut ausgeführt wird, wenn diese Komponente erneut gerendert wird. Die Funktionsweise des Verwendungsstatus 37 00:03:06,340 --> 00:03:12,670 ist jedoch so, dass React erkennt, dass ein Status für diese Komponente bereits initialisiert wurde, sodass nur der Status 38 00:03:12,670 --> 00:03:13,350 festgelegt 39 00:03:13,780 --> 00:03:19,210 wird Geben Sie diese anfängliche Vermutung zum ersten Mal an, wenn diese Komponente gerendert wird, und 40 00:03:19,210 --> 00:03:21,400 nicht für nachfolgende Renderings. Dort wird 41 00:03:21,400 --> 00:03:28,120 diese anfängliche Vermutung zwar neu erstellt, aber aufgrund der getrennten Statusbehandlung, bei der React 42 00:03:28,210 --> 00:03:33,060 herausfindet, dass wir bereits einen Status haben, nicht verwendet. 43 00:03:33,070 --> 00:03:38,080 Damit initialisieren wir dies, wir initialisieren unsere Vermutung auch hier in dieser Liste und fügen der 44 00:03:38,380 --> 00:03:43,090 Liste unten hier eine neue Vermutung hinzu. Mit all dem sollten wir einige 45 00:03:43,240 --> 00:03:46,480 frühere Vermutungen haben, die wir in einer Liste ausgeben können, 46 00:03:46,780 --> 00:03:52,300 und jetzt haben wir hier zwei Möglichkeiten, dies auszugeben, mit einer FlatList oder mit der Bildlaufansicht, und 47 00:03:52,300 --> 00:03:54,660 ich werde wieder mit einer Bildlaufansicht dafür beginnen. 48 00:03:54,730 --> 00:04:02,320 Hier unter der Karte füge ich eine Bildlaufansicht hinzu. Dazu müssen Sie die Bildlaufansicht aus React Native importieren. Führen Sie dies hier 49 00:04:02,320 --> 00:04:02,890 aus, 50 00:04:03,010 --> 00:04:04,820 scrollen Sie die Ansicht, importieren 51 00:04:04,870 --> 00:04:10,060 Sie sie aus React Native und geben Sie sie unter der Liste aus Dies ist 52 00:04:10,420 --> 00:04:13,190 ein scrollbarer Inhalt, da ich dort meinen 53 00:04:13,210 --> 00:04:18,620 dynamischen Inhalt habe, meine früheren Vermutungen verwende und diesen in eine Liste von Komponenten abbilde. 54 00:04:18,640 --> 00:04:20,550 Hier habe ich also sozusagen 55 00:04:20,560 --> 00:04:26,140 meine individuelle Vermutung und dies sollte nun eine Komponente innerhalb dieser Kartenfunktion zurückgeben, und eine 56 00:04:26,140 --> 00:04:32,350 solche Vermutungskomponente könnte eine Ansicht sein, sagen wir, mit einem Text darin, in dem ich einfach die Vermutung 57 00:04:32,350 --> 00:04:39,880 ausgebe, also Hier rendere ich diese Vermutung, die ich bekomme, und da ich meine Vermutungen hier direkt so zum Array hinzufüge, ist 58 00:04:39,880 --> 00:04:45,670 die Vermutung, die ich dort habe, nur die Vermutungsnummer und ich kann sie hier einfach so ausgeben. 59 00:04:47,150 --> 00:04:53,600 Jetzt haben Sie gelernt, dass Sie für Elemente, die wir so zuordnen, auch einen Schlüssel hinzufügen müssen, und 60 00:04:53,600 --> 00:04:57,340 wir könnten unsere Vermutung hier als Schlüssel verwenden, wenn 61 00:04:57,350 --> 00:05:04,010 wir garantiert eindeutig wären, aber mit unserer aktuellen Logik ist dies tatsächlich nicht der Fall Da in unserer aktuellen 62 00:05:04,010 --> 00:05:11,300 Logik das Generieren eines Zufalls zwischen tatsächlich eine neue Zufallszahl generiert, bei der die obere Grenze, dieser hohe Wert hier, ausgeschlossen 63 00:05:11,300 --> 00:05:17,190 ist, die untere Grenze jedoch enthalten ist, können wir diese untere Grenze als neuen Zufallswert erhalten. 64 00:05:17,300 --> 00:05:23,660 Der Nachteil dabei ist, dass wir hier, wo wir unsere neue untere Grenze setzen, dies auf die aktuelle 65 00:05:23,660 --> 00:05:30,020 Vermutung setzen, was bedeutet, dass dies in einer zukünftigen Zufallszahl wiederholt werden kann, und wir haben dies 66 00:05:30,020 --> 00:05:31,120 manchmal auch 67 00:05:31,130 --> 00:05:37,010 in diesem Modul gesehen Der Computer errät eine Zahl, die bereits einige Runden zuvor erraten wurde. 68 00:05:37,070 --> 00:05:42,900 Es ist kein großes Problem, aber jetzt liegt es daran, dass wir jetzt unsere Vermutung garantieren müssen, 69 00:05:43,190 --> 00:05:49,460 einzigartig sein müssen und die Lösung einfach ist. Wir können hier einfach eine hinzufügen, wenn wir unsere neue untere 70 00:05:49,460 --> 00:05:56,930 Grenze festlegen, denn indem wir hier eine hinzufügen, stellen wir sicher dass die neue untere Grenze, die in der Zufallszahlengenerierung enthalten ist, tatsächlich 71 00:05:57,410 --> 00:06:01,270 eine höhere ist als die aktuelle Vermutung, die falsch war, sonst wären 72 00:06:01,280 --> 00:06:02,910 wir nicht hierher gekommen. 73 00:06:02,930 --> 00:06:09,020 Jetzt setzen wir eine neue untere Grenze, die in Zukunft generiert werden kann, die wir aber zuvor nicht 74 00:06:09,020 --> 00:06:09,950 generiert haben. 75 00:06:09,950 --> 00:06:13,100 Dies ist also eine kleine Korrektur in der Logik, die 76 00:06:13,100 --> 00:06:18,560 in keiner Weise schadet, und es ist besonders wichtig, wenn Sie die Vermutung hier als eindeutigen Schlüssel verwenden möchten. 77 00:06:18,640 --> 00:06:20,110 Mal sehen, 78 00:06:20,110 --> 00:06:21,670 ob das funktioniert. 79 00:06:21,730 --> 00:06:26,190 Speichern wir das und probieren wir es hier unter iOS aus, 80 00:06:26,190 --> 00:06:27,610 starten das Spiel 81 00:06:27,750 --> 00:06:31,830 und wir sehen unsere anfängliche Vermutung, 57, es ist nicht 82 00:06:31,830 --> 00:06:37,890 gut formatiert, aber wir sehen es hier. Jetzt ist 57 zu hoch, wenn ich niedriger sage, 83 00:06:37,920 --> 00:06:43,670 sehen wir die neue Vermutung oben auf der Liste und ich habe dort gelogen und das scheint zu funktionieren. 84 00:06:43,740 --> 00:06:49,470 Jetzt bekommen wir natürlich einen Fehler, wenn das Spiel vorbei ist, weil wir dort versuchen, unsere Runden zu bekommen, und wir 85 00:06:49,980 --> 00:06:53,730 verwalten dies nicht mehr als Staat. Also müssen wir das 86 00:06:53,910 --> 00:06:56,590 beheben, aber die Ausgabe der Liste funktioniert. 87 00:06:56,670 --> 00:06:59,140 Beheben wir nun unseren Rundenfehler, 88 00:06:59,160 --> 00:07:08,580 der einfach von useEffect kommt, wo ich Runden an onGameOver weitergebe. Dort muss ich am Ende die Anzahl der Runden weiterleiten, die 89 00:07:08,580 --> 00:07:13,120 der Computer benötigt hat, um unsere Anzahl zu erraten. 90 00:07:13,140 --> 00:07:17,030 Früher hatten wir hier eine Rundenvariable, einen Rundenzustand, jetzt haben wir nur vergangene 91 00:07:17,040 --> 00:07:23,010 Vermutungen, was ein Array ist, so dass wir vergangene Vermutungen wie diese nicht weiterleiten können, weil am Ende des Spiels 92 00:07:23,040 --> 00:07:24,660 am Ende eine Zahl benötigt 93 00:07:24,660 --> 00:07:30,440 wird, aber natürlich können wir die weiterleiten Länge der vergangenen Vermutungen, die nur die Anzahl der Runden ist, die der 94 00:07:30,450 --> 00:07:31,520 Computer benötigt hat. 95 00:07:31,530 --> 00:07:37,920 Wenn wir dies tun, sollten wir nun tatsächlich in der Lage sein, das Spiel auch erfolgreich zu beenden. 96 00:07:37,980 --> 00:07:43,440 Wenn wir es hier kurz versuchen und das Spiel lösen, ja, 97 00:07:43,440 --> 00:07:44,900 das funktioniert. 98 00:07:45,030 --> 00:07:47,340 Jetzt haben wir es also geschafft. 99 00:07:47,340 --> 00:07:51,750 Wenden wir uns nun wieder der Bildlaufansicht und den Listenelementen zu und stellen 100 00:07:51,750 --> 00:07:54,210 sicher, dass wir dort das richtige Styling haben.