Ora che sono messaggi di errore, avremo messaggi di errore durante lo sviluppo e leggerli è una cosa molto importante da
fare perché possono davvero aiutarci a scoprire cosa c'è che non va.
Passiamo ora agli errori che non necessariamente generano messaggi di errore o in cui è necessario scavare un po 'più
a fondo per trovare la causa principale. Ora diciamo ad esempio che in app. js, volevamo scoprire se
stavamo davvero cancellando l'obiettivo giusto qui. Per scoprire se è così, possiamo consolare il log del nostro
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
quindi abbiamo il nostro elenco ovviamente obiettivi qui, quindi è l'elenco senza l'elemento che viene eliminato e quindi vorremmo vederlo dopo che è stato
eliminato, ma il modo in cui questa funzione di
stato impostata qui funziona alla fine,
il modo in cui React aggiorna lo stato, semplicemente stampando di nuovo gli obiettivi del
corso in questa riga non ci forniranno gli obiettivi del corso già aggiornati, ma
verranno aggiornati solo nel prossimo ciclo di rendering.
Quindi non vedremo i nostri obiettivi del corso lì, ma questo non
è 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
verrà ridistribuito quando aggiorniamo i nostri obiettivi del corso con questa linea, quindi questo verrà
eseguito
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
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
è stato eliminato, è l'elenco degli obiettivi del corso prima di aver eliminato un obiettivo
del corso e ora abbiamo aggiunto alcune dichiarazioni del registro della console che
ci consentono di immergerci nel flusso del nostro codice. Detto questo, se lo salvo, l'app si riavvia e vediamo già il
componente di rendering che ha senso, viene visualizzato per la prima volta e vediamo che abbiamo un array
vuoto che ha anche senso perché non abbiamo aggiunto nulla.
Ora aggiungiamo un nuovo obiettivo, magari qui su Android, finiamo il corso. Se lo facciamo, vediamo il rendering del
componente, ha senso perché abbiamo aggiunto qualcosa e, soprattutto, per l'altro re-rendering in
cui abbiamo aggiunto un elemento, vediamo quell'elemento qui nella matrice, vediamo
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
qui, vediamo solo ora che è un array
con due elementi se lo espandiamo qui. Quindi ora siamo in grado di esaminare il nostro codice e ora eliminiamo un elemento facendo
clic su di esso ed eliminiamo l'elemento finale del corso con l'ID 0. 818 e così via.
Quindi, se faccio clic su Finish the course,
vedrai che viene rimosso, quindi sembra funzionare correttamente e il nostro
registro della console lo conferma, stiamo eseguendo nuovamente il rendering, stiamo eseguendo nuovamente il rendering del nostro array solo con questo
ID, quindi con l'altro elemento che non abbiamo eliminato e lassù, vediamo di essere eliminato è
questo ID qui, questo registro proviene da questa riga prima di
eliminarlo, quindi è ancora incluso ma per il prossimo ciclo di nuovo rendering, vediamo che questo L'ID qui non è
più incluso.
Ovviamente, questo è un po 'un esempio
inventato, ovviamente vediamo che si sta comportando correttamente qui, ma semplicemente immaginiamo di avere un flusso più complesso nel tuo
codice che desideri eseguire il debug, quindi tali istruzioni del registro della console possono davvero aiutarti a capire come il tuo
il codice è in esecuzione, la frequenza con cui viene eseguito e se vengono utilizzati i valori corretti.
Quindi le istruzioni di registro della console possono davvero essere utili se le scarichi nel tuo codice, non
dimenticare di rimuoverle alla fine in modo da non riempire il tuo codice con tonnellate di istruzioni di registro della console.