Ahora que sabemos qué estado es
Intentemos implementarlo en nuestro pequeño proyecto.
Y solo como un rápido recordatorio,
lo que queremos que pase
es que cuando hacemos clic en este botón siguiente y este anterior
Básicamente queremos que el paso cambie.
Entonces el paso aquí actualmente está establecido en uno,
pero queremos que esta variable de paso sea básicamente dinámica.
Y por eso,
Ahora necesitamos agregar una nueva parte de estado a nuestro componente.
Así que deshagámonos de esto
y agregar ese nuevo pedazo de estado.
Entonces, para utilizar el estado en la práctica en un componente,
Lo hacemos en tres pasos.
Primero, agregamos una nueva variable de estado,
luego lo usamos en un código y generalmente en JSX.
Y tercero, luego actualizamos el estado.
en algún controlador de eventos.
Y entonces comencemos con el primer paso.
que es realmente crear la variable de estado.
Y lo hacemos usando la función de estado de uso.
que React nos proporciona.
Entonces ese es el estado de uso,
y si ahora presiono enter en mi teclado
ya que este estado de uso aquí está seleccionado
en el código VS autocompletar,
El código VS se importará automáticamente
la función de estado de uso de React.
Entonces esta línea de código aquí.
Ahora si por alguna razón eso no sucedió
en tu editor de código,
luego asegúrese de importar la función de estado de uso
de React de esa manera.
Entonces la función de estado de uso es una función,
y por eso se necesita un argumento,
y el argumento que necesitamos especificar aquí
es el valor predeterminado de esta variable de estado.
Entonces, en nuestro caso, ese es el paso número uno, ¿verdad?
Ahora esto usa la función de estado aquí.
devolverá una matriz.
Y en realidad llamémoslo matriz por ahora.
y luego regístrelo en la consola.
Así que para que lo veas.
Y entonces sí, ahora el paso ya no está definido.
Dejemos eso atrás por un minuto.
El paso es igual a uno y luego abre nuestra consola aquí.
Entonces esta es la matriz.
Y como ves, aquí tiene dos valores.
Entonces este primer valor, entonces este número uno,
es el valor predeterminado que queremos para nuestro estado.
Entonces este de aquí.
Y luego el segundo es una función.
que podemos usar para actualizar nuestra variable de estado.
Entonces lo que solemos hacer
es luego desestructurar inmediatamente esta matriz aquí mismo.
Entonces, primero tenemos el paso, que nuevamente es el primero aquí.
Y esta será nuestra propia variable de estado.
Y luego, en segundo lugar, nuevamente tenemos la función.
Y a este lo solemos llamar set
y luego el nombre de la variable de estado.
Así que, en este caso, dé el paso.
Ahora podemos deshacernos de esto.
Y si ahora recargamos,
vemos que nuestra aplicación ya está usando ese estado,
entonces esa variable de paso, porque esto es exactamente
el nombre de la variable que teníamos antes.
Entonces ya estamos usando el paso en nuestro JSX aquí,
y aquí, y también aquí para el nombre de esta clase.
Bien, hemos completado el primer paso.
de definir la variable de estado
usando la función de estado de uso,
y el segundo paso en el que usamos la variable de estado,
entonces este paso es parte del estado en nuestro código.
Y ahora el tercer paso es actualizar el estado.
en un controlador de eventos.
Así que deshagámonos de esta alerta.
que era sólo un marcador de posición.
O en realidad comencemos con este.
Entonces en el próximo.
Entonces, ahora es el momento de usar esta función de establecer pasos aquí.
Entonces usamos set step para actualizar la variable de estado del paso.
¿Y entonces cuál queremos que sea el paso?
Bueno, básicamente sólo el paso actual más uno, ¿verdad?
Entonces, cuando hagamos clic en el botón siguiente, el paso debería subir un paso.
Y ese es el paso actual más uno.
Y ahora estamos listos para probar esto.
Así que veamos,
y sí, eso funciona.
Nuestro componente ahora es dinámico y felicidades.
acabas de desbloquear el poder del estado y el poder de React.
Entonces, ¿qué pasó aquí cuando hicimos clic en este botón?
fue que se capturó la función de manejo del siguiente evento,
y este controlador de eventos actualizó el estado del paso.
Y entonces React se renderiza automáticamente
esta nueva vista de componentes para nosotros.
Eso es simplemente asombroso.
Ahora volvamos aquí,
e implementar también la función de manejo anterior.
Y aquí básicamente queremos lo contrario.
Así que establezca el paso y luego el paso menos uno.
Así que veamos,
y sí, eso funciona.
Sin embargo, ahora mismo tenemos un pequeño error en nuestra aplicación.
porque mira lo que pasa cuando sigo haciendo clic aquí.
Entonces ves el paso cero y el paso menos uno y así sucesivamente.
Y lo mismo aquí.
Entonces, si sigo adelante, entonces, por supuesto, no tendremos más elementos.
en nuestra matriz para mostrar.
Entonces la matriz solo tiene tres elementos.
Y entonces el paso cinco o cualquier cosa por debajo del paso cero
no tiene ningún sentido.
Y aquí en la función de controlador,
simplemente podemos agregar una condición para evitarlo.
Entonces digamos que si el paso es mayor que uno
solo entonces establece este paso,
y luego, aquí algo similar.
Entonces si el paso es menor a tres.
Así que veamos, recarguemos esto.
Y ahora si hago clic en Siguiente, ahora el paso es tres,
entonces esto de aquí ya no es cierto.
Y ahora entonces esta parte no debería ejecutarse,
y de hecho, eso funciona.
Entonces arreglamos ese pequeño error.
y ahora nuestro componente está funcionando tal como lo queremos.
excelente.
Ahora solo algunas cosas más
sobre la creación de la variable de estado aquí.
Primero que nada, aquí usamos la función de estado.
es lo que llamamos un gancho en React.
Y podemos identificar ganchos.
porque comienzan con esta palabra clave de uso aquí.
Entonces, todas las funciones de React que comienzan con se usan así,
por ejemplo, usar efecto o usar reductor,
y, por supuesto, este estado de uso son ganchos de React.
Y aprenderemos en detalle.
Qué es un gancho de React un poco más tarde.
Pero por ahora, lo que necesitas saber
es que solo podemos llamar a ganchos
como estado de uso, en el nivel superior de la función.
Entonces, este componente funciona aquí.
Así que sólo aquí se permite llamar al estado de uso.
no dentro de una declaración if,
o dentro de otra función, o dentro de un bucle.
Así, por ejemplo, no podríamos hacer esto.
Entonces React inmediatamente nos diría
que el gancho de estado de uso quedó atrapado en una función
eso no es un componente de la función React.
Entonces sólo podemos hacer eso aquí mismo.
Entonces tampoco en una declaración if.
Entonces digamos que si es cierto, por ejemplo,
entonces veamos, y de nuevo, ves inmediatamente
que nos sale este error diciendo
ese estado de uso fue capturado condicionalmente,
y antes de que llegue a este dramático error aquí,
Incluso podemos ver en esta superposición en el código VS.
Ese gancho de React fue atrapado condicionalmente.
Y este de aquí, por cierto, proviene de ESLint.
Y por eso era tan importante
para configurar ESLint al principio.
bueno.
Pero de todos modos, eliminemos todo esto.
Y ahora la otra cosa importante sobre el estado.
es que en realidad sólo deberíamos actualizar el estado
usando esta función de configuración aquí mismo.
Entonces no manualmente.
Ahora, para terminar, acabo de notar que aquí
En realidad, no necesitamos esto cuando usamos nuestro paso aquí.
Entonces no hay necesidad de una plantilla literal aquí.
porque aquí realmente no estamos creando una nueva cadena.
Básicamente estamos generando una nueva cadena.
Basado aquí en este operador de tornería.
pero de todos modos,
ahora tenemos este bonito componente dinámico
todo sin las manipulaciones dom imperativas
que necesitamos en JavaScript básico.