1

Estoy haciendo una actividad de un curso ReactJS, que consiste en crear un cuadrado y darle un evento de overmouse y cambie los colores cada un seg, lo hice y funciona, pero se debe dejar de ejecutar con un dobleClick y el clearInterval no me estaría funcionando, alguien podría decirme porque ?:

const Cuadrado = () => {

    let cuadradoColor = <div className="square-colors"></div>;

    const [square, setSquare] = useState(cuadradoColor);

    let changeColor=()=>{
        let red = Math.floor((Math.random() * 255));
        let green = Math.floor((Math.random() * 255)); 
        let blue = Math.floor((Math.random() * 255 ));

        let newSquare = <div style={{background:`rgb(${red},${green},${blue})`,
        width: '255px', height: '255px',  border: '2px solid rgb(170, 170, 170)',
        cursor: 'pointer'}}></div>
        setSquare(newSquare);
        
    }
    let intervalId;

    function startInterval(){
        
        if (!intervalId) {
          intervalId= setInterval(changeColor, 1000);
        }
    };
    
    function stopInterval (){
        clearInterval(intervalId);
        intervalId = null;
    };

    return (
        <div onMouseOver={startInterval} onDoubleClick={stopInterval}>
            {/*eslint-disable-next-line*/}
            {square}
         
            
        </div>
    );
}
2
  • Se debe actualizar la pregunta agregando el código en vez de una imágen del código.
    – g.4
    Commented el 13 ene. 2023 a las 0:59
  • el problema es que la referencia al intervalId se pierde cuando se cambia el estado del componente... define el intervalId como useRef o como un useState tambien (aunque yo optaría por useRef)
    – Pipe
    Commented el 13 ene. 2023 a las 19:17

1 respuesta 1

1

El problema es que la referencia al intervalId se pierde cuando se cambia el estado del componente... define el intervalId como useRef para que la referencia no se pierda, así:

function Cuadrado() {

  const intervalId = React.useRef(null);
  const [square, setSquare] = React.useState(null);

  function changeColor(){
    console.log("Cambiando color...");
    let red = Math.floor((Math.random() * 255));
    let green = Math.floor((Math.random() * 255)); 
    let blue = Math.floor((Math.random() * 255 ));

    let newSquare = <div style={{background: `rgb(${red},${green},${blue})`,
        width: '100px', height: '100px',  border: '2px solid rgb(170, 170, 170)',
        cursor: 'pointer'}}></div>
    setSquare(newSquare);
  }

  function startInterval(){
    console.log("Cambiando color");
    if (!intervalId.current) {
      intervalId.current = setInterval(changeColor, 1000);
    }
  };
    
  function stopInterval (){
    console.log("Detenido");
    clearInterval(intervalId.current);
    intervalId.current = null;
  };
  
  return (
    <div onMouseOver={startInterval} onDoubleClick={stopInterval} style={{width:100, height: 100, background:"gray"}}>
       {square}
    </div>
  );
}

ReactDOM.render(<Cuadrado />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.