Estoy construyendo una pieza de máquina móvil con tres flechas que se mueven sobre ejes. Cada flecha tiene su propio ángulo. 3 casillas de verificación y 4 botones. Presionar el primer botón mueve la flecha 20 grados a la derecha, el segundo 20 grados a la derecha. El tercero mueve la flecha hacia la izquierda, el cuarto mueve la flecha hacia la derecha. El problema es: después de algunas rondas, al presionar el primer o segundo botón, se detiene el movimiento de una flecha. No sé por qué sucede.

Aquí vinculo casillas de verificación a las flechas.

 const handleChangeButton=(buttonName)=>{ switch (buttonName) { case 'turret': setSelectedButton('turret') console.log(buttonName) break; case 'lazer': setSelectedButton('lazer') console.log(buttonName) break; case 'lezerr': setSelectedButton('lezerr') console.log(buttonName) break; } } const changeButtonToTurret=()=>{ props.handleChangeButton('turret') } const changeButtonToLazer=()=>{ props.handleChangeButton('lazer') } const changeButtonTorad=()=>{ props.handleChangeButton('lezerr') }

Aquí doy un nuevo ángulo e inserto los tres ángulos diferentes de cada flecha

 const handleChange=(e)=>{ let curretnAngle=(e.target.valueAsNumber); if (props.selectedButton=='turret') { curretnAngle=props.angleTurret; } else if (props.selectedButton=='lazer') { curretnAngle=props.angleLazer; } else{ curretnAngle=props.radanglee; }

Y aquí bajo y subo el nuevo ángulo 20 grados

 switch (e.target.name){ case 'minus': props.handlerotate(curretnAngle-=20) break; case 'plus': props.handlerotate(curretnAngle+=20) break; } }

Así es como el ángulo de cada flecha sabe moverse a través del nuevo ángulo 20 grados a la derecha y a la izquierda

La imagen de la simulación =: https://i.stack.imgur.com/JfHgo.png