Cuando presiono el botón, cambia la línea en la página de acuerdo con la posición de la flecha, pero también tengo una extraña aceleración de la flecha. donde esta el problema
element code: const Synchroniser = () => { const[result, setResult] = useState(0) const[word, setWord] = useState("") const point:any = useRef(null); const k = useRef(0); function calculateResult(){ var myvar = k.current if (myvar<30 || myvar>330){ setWord("YOU ARE THE BEST ELECTRICIAN") } else{ setWord("try again") } } useEffect(() => { if (point.current !== null) { setInterval(() => { if (k.current < 360) { k.current = k.current + 3; } if (k.current >=360){ k.current = 0 } point.current.style.transform = `rotate(${k.current}deg)`; }, 10); } else { console.log("0"); } }); return( <div> <div className={classes.synchroniser}> <img src={arpng} ref={point} alt="arrow" className={classes.ar} /> <img src={syncFrame} alt="syncframe" className={classes.syn} /> </div> <div > <Button variant='contained' onClick={calculateResult}>SYNCHRONISE</Button> <h1> {word} </h1> </div> </div> ); }; export default SynchroniserPuedes ver ese enlace de reacción: http://sugwox.ru/
Creo que se relaciona con muchos inicios de setInterval cuando represento una página con diferentes palabras, por lo que borro el intervalo cada vez:
useEffect(() => { if (point.current !== null) { const inter = setInterval(() => { if (k.current < 360) { k.current = k.current + 5; } if (k.current >=360){ k.current = 0 } point.current.style.transform = `rotate(${k.current}deg)`; }, 10); return () => clearInterval(inter) } else { console.log("0"); }