Tutorial de React Parte 15: Talleres estatales de componentes

Hoy, le ofrecemos completar dos clases prácticas sobre cómo trabajar con el estado de los componentes. En particular, al realizar las tareas de hoy, no solo puede comprender mejor el concepto de propiedades, sino también trabajar en la depuración de las aplicaciones React en las que hay errores.

imagen

→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados ​​en clases
→ Parte 14: taller sobre componentes basados ​​en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 27. Taller. Depuración del estado del componente


→ Original

▍Trabajo


Analice el siguiente código de clase de App del archivo App.js de una aplicación React estándar creada por create-react-app . Este código está incompleto, tiene errores.

 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 

El componente de App basado en clases no tiene un constructor, su estado no se inicializa, pero al formar lo que devuelve, implica que tiene un estado con algunos datos.

Su tarea es llevar este código a un estado utilizable.

Si se encuentra con cierto mensaje de error desconocido para usted, no se apresure a buscar la solución. Pruébelo usted mismo, por ejemplo, leyendo cuidadosamente el código y buscando información sobre el problema en Internet, descubra la causa del error y corríjalo. El código de depuración es una habilidad valiosa que definitivamente necesitará cuando trabaje en proyectos reales.

▍Solución


El cuerpo de una clase es similar al cuerpo de un componente funcional. Contiene solo el comando return , pero en componentes basados ​​en clases, este comando se usa en el método render() y no en el cuerpo de la clase. Arreglarlo

 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 

Si continuamos el análisis del código, observando los mensajes de error que se muestran en el navegador, podemos entender que aunque la construcción de la class App extends Component parece bastante normal, todavía hay algo mal con lo que llamamos Component . El problema es que en el comando import, import React from "react" , importamos solo React , pero no Component , al proyecto. Es decir, necesitamos editar este comando, llevándolo al formulario import React, {Component} from "react" , luego, al crear la clase, podemos usar el código existente, o reescribir la declaración de clase en este formulario: class App extends React.Component . Nos centraremos en la primera opción. Ahora el código del componente se ve así:

 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 

Es cierto que los problemas no terminan ahí. La aplicación no funciona, aparece un mensaje de error TypeError: Cannot set property 'props' of undefined en el navegador TypeError: Cannot set property 'props' of undefined , se nos informa que algo está mal con la primera línea de la declaración de clase.

El punto aquí es que cuando se declara un componente que, como ya entendimos, es un componente basado en una clase, aparecen un par de paréntesis después del nombre de la clase padre. No son necesarios aquí, este no es un componente funcional, por lo que los eliminaremos. Ahora el código de la aplicación resulta ser más o menos viable, el componente basado en la clase ya no parece completamente incorrecto, pero el sistema continúa informándonos errores. Ahora el mensaje de error se ve así: TypeError: Cannot read property 'name' of null . Obviamente, se refiere a un intento de usar datos almacenados en un estado de componente que aún no se ha inicializado. Por lo tanto, ahora crearemos un constructor de clase sin olvidar llamar a super() en él e inicializar el estado del componente agregando valores con los que el componente está tratando de funcionar.

Aquí está el código de trabajo terminado para el componente de la 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 

Así es como se verá la página de la aplicación en un navegador.


Página de aplicación en el navegador

Lección 28. Taller. Estado componente, trabajo con datos almacenados en estado


→ Original

En esta sesión de práctica, tendrá otra oportunidad de trabajar con el estado de los componentes.

▍Trabajo


A continuación se muestra el código del componente funcional. En base a esto, haga lo siguiente:

  1. Transfórmalo para que el componente tenga un estado.
  2. El estado del componente debe tener la propiedad isLoggedIn , que almacena el valor lógico true si el usuario ha iniciado sesión, y false si no (en nuestro caso, no hay mecanismos de "inicio de sesión" aquí, el valor correspondiente debe establecerse manualmente, cuando se inicializa el estado).
  3. Intente asegurarse de que si el usuario ha iniciado sesión, el componente You are currently logged in texto en el You are currently logged in y, de lo contrario, el texto en el You are currently logged out . Esta tarea es opcional, si tiene dificultades en su implementación, puede, por ejemplo, buscar ideas en Internet.

Aquí está el código para el archivo App.js :

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

▍Solución


Tenemos un componente funcional a nuestra disposición. Para equiparlo con un estado, debe transformarse en un componente basado en la clase e inicializar su estado. Así es como se ve el código del 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 el estado de la aplicación.


Aplicación en navegador

De hecho, si usted mismo ha llegado a este punto, significa que ha aprendido el material en el curso dedicado a componentes basados ​​en clases y estado de componentes. Ahora nos dedicaremos a una tarea opcional.

En esencia, lo que necesitamos hacer para completar esta tarea se discutirá en una lección que se centra en la representación condicional, por lo que aquí vamos un poco más adelante. Entonces, vamos a declarar e inicializar una variable que contendrá la cadena in o out dependiendo de lo que esté almacenado en la isLoggedIn estado isLoggedIn . Trabajaremos con esta variable en el método render() , primero analizando los datos y escribiendo el valor deseado en ellos, y luego usándolos en el código JSX devuelto por el componente. Esto es lo que terminamos con:

 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 

Tenga en cuenta que la variable wordDisplay es una variable local ordinaria declarada en el método render() , por lo tanto, para acceder a ella dentro de este método, solo necesita especificar su nombre.

Así es como se verá la página de la aplicación:


Página de aplicación en el navegador

La isLoggedIn estado isLoggedIn establece en true , por lo que el texto en el You are currently logged in se muestra en la página. Para mostrar el texto You are currently logged out isLoggedIn You are currently logged out debe cambiar, en el código del componente, el valor de isLoggedIn a false .

Cabe señalar que este problema se puede resolver de otras maneras. Pero el código que hemos obtenido es claro y eficiente, por lo que nos detendremos en él, aunque, por ejemplo, dado que isLoggedIn es una variable lógica, la condición if (this.state.isLoggedIn === true) puede reescribirse como if (this.state.isLoggedIn) .

Resumen


Hoy practicó trabajar con el estado de los componentes, en particular, los errores corregidos en el código, procesó un componente funcional en un componente basado en clases y participó en la representación condicional. La próxima vez tendrá otro trabajo práctico y un nuevo tema.

Estimados lectores! ¿Se las arregló para encontrar y corregir todos los errores usted mismo completando el primero del trabajo práctico presentado aquí?

Source: https://habr.com/ru/post/438988/


All Articles