Grupo de React
Este grupo esta relacionado con nuestro curso profesional de React. Aquí se comparten temas... View more
organizador:
- Organizado por
-
Creando state y manipulándolo
Creando state y manipulándolo
Hola,
Tengo un duda, he estado haciendo el state y moviendole haciendo lo que indica en el video de incrementar un contador pero por alguna razon me incrementa dos veces.
puse un console.log para ver el evento onClick y veo que me sale dos veces. Ya revise mi codigo y no encuentro por que razon hace eso.
adjunto una imagen y la consola donde se ve que al presionar el boton y mandar llamar la funcion el console.log del prevState.counter sale dos veces. en esta prueba quite el contador para ver que estaba pasando por eso muestra cero, pero lo raro es que me sale dos veces.
alguna sugerencia @martinmelo97
- 6 Respuestas
¡Hola Carlos! Me da gusto saber de ti y que sigues tomando este curso profesional de React!
Entiendo el bug que está presente en tu código, la manera más sencilla de poder detectarlo en el código y solucionarlo es poder visualizar justamente el mismo. Por lo que te pido que si te es posible subas tu proyecto en el que está ocurriendo esto a un repositorio de Github para poder visualizarlo con calma. En caso de que no puedas realizar esto, puedes utilizar la siguiente URL: https://carbon.now.sh/. Aquí únicamente pega tu componente de Counter y selecciona en el segundo dropdown “Javascript”. Una vez hecho esto, simplemente das click en “Export” y te exportará una imagen. Esa imagen puedes adjuntarla aquí mismo o enviármela por mensaje privado, como tu gustes, Carlos.
Quedo al pendiente de visualizar tu código para que juntos encontremos el porqué está ocurriendo esto y solucionarlo. Te mando un saludo Carlos!
Hola Martin,
agregue un repositorio de github con el codigo.
https://github.com/Karoluz/CursoReact
mi componente de clase es index.jsx donde tengo la funcion de incrementar.
en profile realize la prueba de incrementar mas 2 pero con la opcion de let y setState y si incrementa bien.
adjunto una imagen del codigo tambien, haber cual es el error que tengo, ya revise el codigo lo mas que pude pero segun yo lo tengo igual como lo indicas en los videos.
Saludos y gracias por la ayuda.
¡Hola Carlos! Disculpa la tardanza, pero ya pude revisar tu código y encontrar qué es lo que estaba pasando. Te comento que cloné tu repositorio y por alguna extraña razón el package.json no se subió (no sé si lo tengas dentro del .gitignore), el caso es que tuve que hacer algunas cosillas por ahí para poder probarlo. Efectivamente, el botón de decrementar está realizando un -2 en lugar de un -1. Debuggeando un poco encontré que lo que ocurría es que el setState dentro de esa función se llamada 2 veces. Esto ocurría ya que teníamos la siguiente forma de actualizar el state: prevState.counter -= 1. Como nosotros restábamos uno y lo colocábamos en el mismo atributo dentro del state, esto hacía que al detecta que hubo un cambio en el mismo atributo, se volviera a llamar la función. Entonces buscando en la documentación de React, encontré que la manera correcta es la que muestro en la imagen que te adjunto: return { counter: prevState.counter – 1}. Es curioso que a mi si me funcionara de la forma de arriba, puede ser alguna actualización de la librería. Intenta actualizar tu código con lo que te comento y me dices si funciona!
Hola @martinmelo97 , gracias por la respuesta, efectivamente con ese cambio si funciona, si esta raro revise el video varias veces por si algo se me habia pasado, me quebre un rato la cabeza tratando de pensar que era, cuando ya no encontre decide preguntar, puede que tenga alguna diferencia en los paquetes de react.
de nuevo gracias 😉
¡No hay de que Carlos! Un gusto poder ayudarte 😋.
Inicia sesión para responder.