Estoy tratando de hacer un setState simple en un botón con un contador y aplicar un color de fondo diferente según su estado. Funciona perfectamente para los primeros 3 clics de botón y en el cuarto y así sucesivamente hace esto: registro de contador
Aquí está el código:
useEffect(() => { const changePower = () => { if (power === 'on') { document.getElementById('btn-trigger').style.backgroundColor = "red"; setPower('off'); } else if (power==='off') { document.getElementById('btn-trigger').style.backgroundColor = "lime"; setPower('on'); } setCount(count + 1); } document.getElementById('btn-trigger').addEventListener('click', changePower); console.log(count); }, [power])Cualquier ayuda sería increíble, ¡Gracias!
Si configura Power en useEffect, se activará solo.
useEffect(() => { if(count%2) document.getElementById('btn-trigger').style.backgroundColor = "red"; else document.getElementById('btn-trigger').style.backgroundColor = "lime"; }, [count]) const handeClick = () => { setCount(count + 1); }está configurando el valor de "potencia" por "setPower" dentro de un efecto de uso que está escuchando los cambios en "potencia".
Necesitas limpiar los eventos:
useEffect(() => { const changePower = () => { if (power === 'on') { document.getElementById('btn-trigger').style.backgroundColor = "red"; setPower('off'); } else if (power==='off') { document.getElementById('btn-trigger').style.backgroundColor = "lime"; setPower('on'); } setCount(count + 1); } document.getElementById('btn-trigger').addEventListener('click', changePower); console.log(count); return () => window.removeEventListener("click", changePower) <----- }, [power]) Además: la función changePower debe declararse fuera del useEffect . Usas el enlace useCallback aquí.