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.
→
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 cursoLecció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 navegadorLección 28. Taller. Estado componente, trabajo con datos almacenados en estado
→
OriginalEn 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:
- Transfórmalo para que el componente tenga un estado.
- 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). - 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 navegadorDe 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 navegadorLa
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í?
