Agora que são mensagens de erro, receberemos mensagens de erro durante o desenvolvimento e lê-las é uma coisa muito importante,
porque elas realmente podem nos ajudar a descobrir o que está errado.
Agora vamos passar para erros que não necessariamente lançam mensagens de erro ou onde você precisa cavar um
pouco mais para encontrar a causa raiz. Agora, por exemplo, digamos que no aplicativo. js, queríamos descobrir se
estávamos realmente excluindo o objetivo certo aqui. Para descobrir se é esse o caso, podemos consolar o log do
nosso ID de objetivo aqui, talvez adicionar algum texto de informação como ser eliminado antes disso, para obtermos alguma informação sobre o que está a ser impresso aqui e
depois temos a nossa lista de metas aqui, então essa é a lista sem o item ser excluído e, em seguida, gostaríamos de vê-lo depois
de ser excluído, mas a maneira como essa função
de estado definida funciona aqui no final,
a maneira como o React atualiza o estado, imprimindo as metas do curso novamente nessa
linha não nos fornecerá as metas do curso já atualizadas, em vez disso, elas
só serão atualizadas no próximo ciclo de renderização.
Então não vamos ver as metas do nosso curso, mas isso não é
problema, só precisamos registrar isso em um lugar diferente, registramos isso aqui mesmo em nosso componente. Lá registramos as metas do curso e todo este
componente será renderizado novamente quando atualizarmos as metas do nosso curso com esta linha,
então
isso será reexecutado, então talvez possamos também adicionar um pequeno log de console, componente de re-renderização, para que possamos saibam que a lista de metas do
curso que estamos imprimindo após essa é a lista após cada ciclo de re-renderização, enquanto a lista de metas do curso que estamos
imprimindo depois de ser excluída é a lista de metas do curso antes de excluirmos
uma meta do curso Adicionamos algumas instruções de log do console que
nos permitem mergulhar no fluxo de nosso código. Com isso, se eu salvar isso, o aplicativo reinicia e já vemos
o componente de re-renderização que faz sentido, está sendo renderizado na primeira vez e vemos que temos uma
matriz vazia que também faz sentido porque não adicionamos nada.
Agora vamos adicionar um novo objetivo, talvez aqui no Android, terminar o curso. Se fizermos isso, vemos o componente renderizar
novamente, faz sentido porque adicionamos algo e, mais importante, para a outra reprocessação onde
adicionamos um item, vemos esse item aqui na matriz, também vemos
o ID de esse item e o valor que parece certo. Agora vamos adicionar outro item talvez, aprender Reagir Nativo e adicionar isso e ver
isso aqui, agora vemos que é uma matriz
com dois itens se expandirmos isso aqui. Então, agora podemos analisar nosso código e agora vamos excluir um item clicando nele e
vamos excluir o término do item do curso com o ID 0. 818 e assim por diante.
Então, se eu clicar terminar o curso, você
verá que ele é removido, então parece funcionar corretamente e nosso
log de console confirma isso, estamos processando novamente, estamos re-renderizando nosso array apenas com esse ID, então com o outro item
que nós não deletamos e lá em cima, nós vemos para ser deletado é esse ID
aqui, esse log é proveniente dessa linha antes de ser
deletado, então ele ainda está incluído mas para o próximo ciclo de re-renderização, vemos que este ID aqui não é
mais incluído.
Claro, isso é um exemplo inventado,
é claro que estamos nos comportando corretamente aqui, mas simplesmente imagine que você tem um fluxo mais complexo no
código que deseja depurar, então essas instruções de log do console podem realmente ajudar você a entender como o código
está sendo executado, com que frequência ele está sendo executado e se os valores corretos estão sendo usados.
Portanto, as instruções de log do console podem realmente ser úteis se você as despejar em seu código,
apenas não se esqueça de removê-las eventualmente para não sobrecarregar seu código com toneladas de instruções de log do console.