1 00:00:02,400 --> 00:00:09,660 Nun, das sind Fehlermeldungen, wir werden während der Entwicklung Fehlermeldungen erhalten und das Lesen ist eine sehr wichtige 2 00:00:09,660 --> 00:00:14,180 Sache, da sie uns wirklich helfen können, herauszufinden, was falsch ist. 3 00:00:14,310 --> 00:00:21,870 Kommen wir nun zu Fehlern, die nicht unbedingt Fehlermeldungen auslösen oder bei denen Sie etwas tiefer graben 4 00:00:21,870 --> 00:00:30,840 müssen, um die Grundursache zu finden. Sagen wir das jetzt zum Beispiel in der App. js, wir wollten herausfinden, 5 00:00:30,840 --> 00:00:39,390 ob wir hier wirklich das richtige Ziel löschen. Um herauszufinden, ob dies der Fall ist, können wir hier 6 00:00:40,500 --> 00:00:50,900 unsere Ziel-ID auf der Konsole protokollieren und möglicherweise einen Informationstext hinzufügen, der davor gelöscht werden soll, damit wir einige Informationen darüber erhalten, was hier gedruckt wird, 7 00:00:50,900 --> 00:00:59,840 und dann haben wir natürlich unsere Liste Ziele hier, das ist also die Liste, ohne dass das Element gelöscht wird, und dann 8 00:00:59,930 --> 00:01:03,360 möchten wir, dass es danach gelöscht wird, aber 9 00:01:03,770 --> 00:01:06,710 wie diese Funktion zum Festlegen des 10 00:01:06,710 --> 00:01:12,170 Status hier am Ende funktioniert, wie React den Status aktualisiert und nur die Kursziele 11 00:01:12,170 --> 00:01:17,350 erneut druckt In dieser Zeile erhalten Sie nicht die bereits aktualisierten Kursziele, sondern 12 00:01:17,370 --> 00:01:20,390 diese werden erst im nächsten Renderzyklus aktualisiert. 13 00:01:20,390 --> 00:01:23,480 Wir werden unsere Kursziele dort also nicht sehen, aber das ist kein Problem. 14 00:01:23,480 --> 00:01:30,860 Wir müssen dies nur an einer anderen Stelle protokollieren. Wir protokollieren dies hier in unserer Komponente. Dort protokollieren wir die Kursziele und diese gesamte 15 00:01:30,860 --> 00:01:35,920 Komponente wird neu gerendert, wenn wir unsere Kursziele mit dieser Zeile aktualisieren. 16 00:01:35,920 --> 00:01:36,630 Dies 17 00:01:36,730 --> 00:01:46,090 wird erneut ausgeführt, sodass wir möglicherweise auch ein kleines Konsolenprotokoll hinzufügen und die Komponente neu rendern können, damit wir Wissen Sie, dass die 18 00:01:46,090 --> 00:01:54,370 Kurszielliste, die wir nach dieser drucken, die Liste nach jedem erneuten Rendern ist, während die Kurszielliste, die wir nach dieser 19 00:01:54,610 --> 00:01:59,890 zu löschenden Zeile drucken, die Kurszielliste ist, bevor wir ein Kursziel gelöscht haben 20 00:01:59,890 --> 00:02:04,270 und jetzt Wir haben einige Konsolenprotokollanweisungen hinzugefügt, mit denen wir 21 00:02:04,270 --> 00:02:10,390 in den Fluss unseres Codes eintauchen können. Wenn ich das speichere, wird die App neu gestartet und wir sehen 22 00:02:10,480 --> 00:02:14,650 bereits eine sinnvolle Neu-Rendering-Komponente. Sie wird beim ersten Mal gerendert und wir sehen, dass wir ein leeres Array 23 00:02:14,650 --> 00:02:17,210 haben, das auch Sinn macht, weil wir nichts hinzugefügt haben. 24 00:02:17,320 --> 00:02:26,400 Fügen wir nun ein neues Ziel hinzu, vielleicht hier auf Android, und beenden Sie den Kurs. Wenn wir das tun, sehen wir, dass die Komponente neu 25 00:02:26,470 --> 00:02:33,810 gerendert wird, was Sinn macht, weil wir etwas hinzugefügt haben, und vor allem für das andere erneute Rendern, 26 00:02:33,810 --> 00:02:39,810 bei dem wir ein Element hinzugefügt haben, sehen wir dieses Element hier im Array, wir 27 00:02:39,810 --> 00:02:51,780 sehen auch die ID von dieser Gegenstand und der Wert, der in Ordnung aussieht. Fügen wir nun vielleicht ein weiteres Element hinzu, lernen React Native und fügen dieses hinzu. Wir sehen dies 28 00:02:51,780 --> 00:02:55,350 hier. Wir sehen gerade, dass es sich um ein Array mit 29 00:02:55,350 --> 00:03:01,770 zwei Elementen handelt, wenn wir dies hier erweitern. Jetzt können wir in unseren Code schauen und jetzt ein Element löschen, indem 30 00:03:01,770 --> 00:03:07,560 wir darauf klicken, und das Kurselement mit der ID 0 beenden. 818 und so weiter. 31 00:03:08,310 --> 00:03:11,070 Wenn ich also auf "Kurs beenden" klicke, wird 32 00:03:11,070 --> 00:03:14,380 er entfernt. Es scheint also korrekt zu funktionieren, und unser Konsolenprotokoll 33 00:03:14,400 --> 00:03:20,940 bestätigt dies. Wir rendern neu. Wir rendern unser Array nur mit dieser ID neu, also mit dem anderen Ein Element, das wir 34 00:03:20,940 --> 00:03:25,830 nicht gelöscht haben, und dort oben sehen wir, dass es gelöscht wird, ist diese ID hier. 35 00:03:25,950 --> 00:03:29,220 Dieses Protokoll stammt aus dieser Zeile, bevor wir es gelöscht haben. 36 00:03:29,250 --> 00:03:35,490 Es ist also immer noch enthalten, aber für den nächsten Re-Render-Zyklus sehen wir dies ID hier ist in der Tat nicht 37 00:03:35,490 --> 00:03:36,320 mehr enthalten. 38 00:03:36,390 --> 00:03:38,250 Das ist natürlich ein erfundenes Beispiel. 39 00:03:38,250 --> 00:03:43,290 Wir sehen natürlich, dass sich das hier richtig verhält, aber stellen Sie sich einfach vor, Sie haben einen 40 00:03:43,290 --> 00:03:48,540 komplexeren Ablauf in Ihrem Code, den Sie debuggen möchten. Dann können solche Konsolenprotokollanweisungen Ihnen wirklich helfen, zu verstehen, wie 41 00:03:48,540 --> 00:03:53,310 Ihre Code wird ausgeführt, wie oft er ausgeführt wird und ob die richtigen Werte verwendet werden. 42 00:03:53,520 --> 00:03:58,470 Konsolenprotokollanweisungen können also sehr hilfreich sein, wenn Sie sie in Ihren Code kopieren. Vergessen Sie 43 00:03:58,470 --> 00:04:03,900 jedoch nicht, sie eventuell auch zu entfernen, damit Sie Ihren Code nicht mit Tonnen von Konsolenprotokollanweisungen überfüllen.