1
00:00:02,400 --> 00:00:09,660
Ora che sono messaggi di errore, avremo messaggi di errore durante lo sviluppo e leggerli è una cosa molto importante da

2
00:00:09,660 --> 00:00:14,180
fare perché possono davvero aiutarci a scoprire cosa c'è che non va.

3
00:00:14,310 --> 00:00:21,870
Passiamo ora agli errori che non necessariamente generano messaggi di errore o in cui è necessario scavare un po 'più

4
00:00:21,870 --> 00:00:30,840
a fondo per trovare la causa principale. Ora diciamo ad esempio che in app. js, volevamo scoprire se

5
00:00:30,840 --> 00:00:39,390
stavamo davvero cancellando l'obiettivo giusto qui. Per scoprire se è così, possiamo consolare il log del nostro

6
00:00:40,500 --> 00:00:50,900
ID obiettivo qui, forse aggiungere del testo informativo come essere cancellato di fronte a questo, in modo da ottenere alcune informazioni su ciò che viene stampato qui e

7
00:00:50,900 --> 00:00:59,840
quindi abbiamo il nostro elenco ovviamente obiettivi qui, quindi è l'elenco senza l'elemento che viene eliminato e quindi vorremmo vederlo dopo che è stato

8
00:00:59,930 --> 00:01:03,360
eliminato, ma il modo in cui questa funzione di

9
00:01:03,770 --> 00:01:06,710
stato impostata qui funziona alla fine,

10
00:01:06,710 --> 00:01:12,170
il modo in cui React aggiorna lo stato, semplicemente stampando di nuovo gli obiettivi del

11
00:01:12,170 --> 00:01:17,350
corso in questa riga non ci forniranno gli obiettivi del corso già aggiornati, ma

12
00:01:17,370 --> 00:01:20,390
verranno aggiornati solo nel prossimo ciclo di rendering.

13
00:01:20,390 --> 00:01:23,480
Quindi non vedremo i nostri obiettivi del corso lì, ma questo non

14
00:01:23,480 --> 00:01:30,860
è un problema, dobbiamo solo registrarlo in un posto diverso, registrarlo proprio qui nel nostro componente. Lì registriamo gli obiettivi del corso e questo intero componente

15
00:01:30,860 --> 00:01:35,920
verrà ridistribuito quando aggiorniamo i nostri obiettivi del corso con questa linea, quindi questo verrà

16
00:01:35,920 --> 00:01:36,630
eseguito

17
00:01:36,730 --> 00:01:46,090
di nuovo, quindi forse potremo anche solo aggiungere un piccolo registro della console, ridistribuire il componente, in modo che sappi che l'elenco degli obiettivi del corso che

18
00:01:46,090 --> 00:01:54,370
stiamo stampando dopo questo è l'elenco dopo ogni ciclo di nuovo rendering mentre l'elenco degli obiettivi del corso che stiamo stampando dopo che questo

19
00:01:54,610 --> 00:01:59,890
è stato eliminato, è l'elenco degli obiettivi del corso prima di aver eliminato un obiettivo

20
00:01:59,890 --> 00:02:04,270
del corso e ora abbiamo aggiunto alcune dichiarazioni del registro della console che

21
00:02:04,270 --> 00:02:10,390
ci consentono di immergerci nel flusso del nostro codice. Detto questo, se lo salvo, l'app si riavvia e vediamo già il

22
00:02:10,480 --> 00:02:14,650
componente di rendering che ha senso, viene visualizzato per la prima volta e vediamo che abbiamo un array

23
00:02:14,650 --> 00:02:17,210
vuoto che ha anche senso perché non abbiamo aggiunto nulla.

24
00:02:17,320 --> 00:02:26,400
Ora aggiungiamo un nuovo obiettivo, magari qui su Android, finiamo il corso. Se lo facciamo, vediamo il rendering del

25
00:02:26,470 --> 00:02:33,810
componente, ha senso perché abbiamo aggiunto qualcosa e, soprattutto, per l'altro re-rendering in

26
00:02:33,810 --> 00:02:39,810
cui abbiamo aggiunto un elemento, vediamo quell'elemento qui nella matrice, vediamo

27
00:02:39,810 --> 00:02:51,780
anche l'ID di quell'elemento e il valore che sembra a posto. Ora aggiungiamo forse un altro oggetto, impariamo React Native e aggiungiamo questo e lo vediamo

28
00:02:51,780 --> 00:02:55,350
qui, vediamo solo ora che è un array

29
00:02:55,350 --> 00:03:01,770
con due elementi se lo espandiamo qui. Quindi ora siamo in grado di esaminare il nostro codice e ora eliminiamo un elemento facendo

30
00:03:01,770 --> 00:03:07,560
clic su di esso ed eliminiamo l'elemento finale del corso con l'ID 0. 818 e così via.

31
00:03:08,310 --> 00:03:11,070
Quindi, se faccio clic su Finish the course,

32
00:03:11,070 --> 00:03:14,380
vedrai che viene rimosso, quindi sembra funzionare correttamente e il nostro

33
00:03:14,400 --> 00:03:20,940
registro della console lo conferma, stiamo eseguendo nuovamente il rendering, stiamo eseguendo nuovamente il rendering del nostro array solo con questo

34
00:03:20,940 --> 00:03:25,830
ID, quindi con l'altro elemento che non abbiamo eliminato e lassù, vediamo di essere eliminato è

35
00:03:25,950 --> 00:03:29,220
questo ID qui, questo registro proviene da questa riga prima di

36
00:03:29,250 --> 00:03:35,490
eliminarlo, quindi è ancora incluso ma per il prossimo ciclo di nuovo rendering, vediamo che questo L'ID qui non è

37
00:03:35,490 --> 00:03:36,320
più incluso.

38
00:03:36,390 --> 00:03:38,250
Ovviamente, questo è un po 'un esempio

39
00:03:38,250 --> 00:03:43,290
inventato, ovviamente vediamo che si sta comportando correttamente qui, ma semplicemente immaginiamo di avere un flusso più complesso nel tuo

40
00:03:43,290 --> 00:03:48,540
codice che desideri eseguire il debug, quindi tali istruzioni del registro della console possono davvero aiutarti a capire come il tuo

41
00:03:48,540 --> 00:03:53,310
il codice è in esecuzione, la frequenza con cui viene eseguito e se vengono utilizzati i valori corretti.

42
00:03:53,520 --> 00:03:58,470
Quindi le istruzioni di registro della console possono davvero essere utili se le scarichi nel tuo codice, non

43
00:03:58,470 --> 00:04:03,900
dimenticare di rimuoverle alla fine in modo da non riempire il tuo codice con tonnellate di istruzioni di registro della console.