Tutorial Reagir Parte 15: Workshops sobre o estado dos componentes

Hoje, sugerimos que você conclua duas aulas práticas sobre como trabalhar com o estado dos componentes. Em particular, executando as tarefas de hoje, você pode não apenas entender melhor o conceito de propriedades, mas também trabalhar na depuração de aplicativos React nos quais há erros.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 27. Oficina. Depuração do status do componente

→ Original

▍Job

Analise o código da classe App abaixo no arquivo App.js de um aplicativo React padrão criado por create-react-app . Este código está incompleto, possui erros.

 import React from "react" class App extends Component() {   return (       <div>           <h1>{this.state.name}</h1>           <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>       </div>   ) } export default App 

O componente App baseado em classe não tem um construtor, seu estado não é inicializado, mas ao formar o que retorna, isso implica que ele possui um estado com alguns dados.

Sua tarefa é trazer esse código para um estado utilizável.

Se você encontrar uma determinada mensagem de erro desconhecida, não se apresse em procurar a solução. Tente, por exemplo, ler atentamente o código e procurar informações sobre o problema na Internet, descubra a causa do erro e corrija-o. O código de depuração é uma habilidade valiosa que você definitivamente precisará quando estiver trabalhando em projetos reais.

▍Solução

O corpo de uma classe é semelhante ao corpo de um componente funcional. Ele contém apenas o comando de return , mas em componentes baseados em classes, esse comando é usado no método render() e não no corpo da classe. Corrija.

 import React from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Se continuarmos analisando o código, observando as mensagens de erro exibidas no navegador, podemos entender que, embora a class App extends Component construção de class App extends Component pareça bastante normal, ainda há algo errado com o que chamamos de nome de Component . O problema é que, no comando import, import React from "react" , importamos apenas React , mas não Component , para o projeto. Ou seja, precisamos editar este comando, trazendo-o para o formulário import React, {Component} from "react" ; em seguida, ao criar a classe, podemos usar o código existente ou reescrever a declaração da classe neste formato: class App extends React.Component . Vamos nos concentrar na primeira opção. Agora, o código do componente fica assim:

 import React, {Component} from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

É verdade que os problemas não param por aí. O aplicativo não funciona, uma mensagem de erro TypeError: Cannot set property 'props' of undefined aparece no navegador TypeError: Cannot set property 'props' of undefined , somos informados de que algo está errado com a primeira linha da declaração de classe.

O ponto aqui é que, ao declarar um componente, que, como já entendemos, é um componente baseado em uma classe, um par de parênteses aparece após o nome da classe pai. Eles não são necessários aqui, este não é um componente funcional, portanto, vamos nos livrar deles. Agora, o código do aplicativo acaba sendo mais ou menos viável, o componente baseado na classe não parece mais completamente errado, mas o sistema continua relatando erros para nós. Agora a mensagem de erro é semelhante a esta: TypeError: Cannot read property 'name' of null . Obviamente, refere-se a uma tentativa de usar dados armazenados em um estado de componente que ainda não foi inicializado. Portanto, agora criaremos um construtor de classe sem esquecer de chamar super() e inicializaremos o estado do componente adicionando valores a ele com os quais o componente está tentando trabalhar.

Aqui está o código de trabalho final para o componente App :

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           name: "Sally",           age: 13       }   }     render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Aqui está a aparência da página do aplicativo em um navegador.


Página do aplicativo no navegador

Lição 28. Oficina. Estado do componente, trabalhe com dados armazenados no estado

→ Original

Nesta sessão de prática, você terá outra chance de trabalhar com o estado dos componentes.

▍Job

Abaixo está o código do componente funcional. Com base nisso, faça o seguinte:

1. Transforme-o para que o componente tenha um estado.
2. O estado do componente deve ter a propriedade isLoggedIn , que armazena o valor lógico true se o usuário estiver conectado e false se não (no nosso caso, não existem mecanismos de "logon" aqui, o valor correspondente deve ser definido manualmente, quando o estado for inicializado).
3. Tente garantir que, se o usuário estiver conectado, o componente You are currently logged in texto You are currently logged in e, caso contrário, o texto You are currently logged out . Essa tarefa é opcional, se você tiver dificuldades em sua implementação, poderá, por exemplo, procurar idéias na Internet.

Aqui está o código para o arquivo App.js :

 import React from "react" function App() {   return (       <div>           <h1>You are currently logged (in/out)</h1>       </div>   ) } export default App 

▍Solução

Temos um componente funcional à nossa disposição. Para equipá-lo com estado, ele deve ser transformado em um componente baseado na classe e inicializar seu estado. Aqui está a aparência do código do componente convertido:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       return (           <div>               <h1>You are currently logged (in/out)</h1>           </div>       )   } } export default App 

Verifique a saúde do aplicativo.


Aplicativo no navegador

De fato, se você chegou a esse ponto, significa que aprendeu o material do curso dedicado aos componentes com base nas classes e no estado dos componentes. Agora estaremos envolvidos em uma tarefa opcional.

Em essência, o que precisamos fazer para concluir esta tarefa será discutido em uma lição que se concentra na renderização condicional; portanto, aqui vamos um pouco adiante. Então, vamos declarar e inicializar uma variável que conterá a string in ou out dependendo do que é armazenado na isLoggedIn estado isLoggedIn . Trabalharemos com essa variável no método render() , primeiro analisando os dados e gravando o valor desejado e, em seguida, usando-o no código JSX retornado pelo componente. Aqui está o que acabamos com:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       let wordDisplay       if (this.state.isLoggedIn === true) {           wordDisplay = "in"       } else {           wordDisplay = "out"       }       return (           <div>               <h1>You are currently logged {wordDisplay}</h1>           </div>       )   } } export default App 

Observe que a variável wordDisplay é uma variável local comum declarada no método render() ; portanto, para acessá-la nesse método, basta especificar seu nome.

Aqui está a aparência da página do aplicativo:


Página do aplicativo no navegador

A isLoggedIn state isLoggedIn definida como true , portanto, o texto You are currently logged in aparece na página. Para exibir o texto You are currently logged out precisa alterar, no código do componente, o valor de isLoggedIn para false .

Note-se que esse problema pode ser resolvido de outras maneiras. Mas o código que obtivemos é claro e eficiente, portanto, vamos continuar com ele, embora, por exemplo, dado que isLoggedIn seja uma variável lógica, a condição if (this.state.isLoggedIn === true) possa ser reescrita como if (this.state.isLoggedIn) .

Sumário

Hoje você praticou o trabalho com o estado dos componentes, em particular, corrigiu erros no código, processou um componente funcional em um componente baseado em classes e se envolveu na renderização condicional. Da próxima vez, você terá outro trabalho prático e um novo tópico.

Caros leitores! Você conseguiu encontrar e corrigir todos os erros completando o primeiro trabalho prático apresentado aqui?