Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

121
Vistas
Ejecutar intervalo establecido cuando haga clic en otro componente Reaccionar

Quiero activar una cuenta regresiva de 60 segundos cuando el usuario haga clic en otro componente. hasta ahora no encontre ninguna solucion

 const [seconds, setSeconds] = useState(60) useEffect(() => { console.log(state.Trade.length ,"woking in useeffect "); setInterval(() => { setSeconds(prevState => prevState - 1) }, 1000); }, [state.Trade.length]); // also use without use effect const startCounter = () => { setInterval(() => { setSeconds(prevState => prevState - 1) }, 1000); } if (state.Trade.length!=0) { if (seconds==0) return null startCounter() }else{ return null }

no funciona busco mucho pero no lo encontre.gracias

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Recuerda borrar tu intervalo

 const [seconds, setSeconds] = useState(60); useEffect(() => { const intervalId = setInterval(() => { setSeconds((prevState) => { if(prevState === 1) clearInterval(intervalId) return prevState - 1; }); }, 1000); }, [state.Trade.length]);
about 4 years ago · Juan Pablo Isaza Denunciar

0

El useEffect se activará cuando cambie state.Trade.length .

Probablemente necesite tener una dependencia de seconds .

Algo como esto:

 const [seconds, setSeconds] = useState(60) useEffect(() => { console.log(state.Trade.length ,"woking in useeffect "); setInterval(() => { setSeconds(prevState => prevState - 1) }, 1000); }, [seconds]);

Tenga en cuenta que esto tiene 2 problemas:

  1. Linters se quejará de no tener state.Trade.length como dep, pero solo está usando esto para consolar el valor
  2. setInterval solo usa el tiempo como una pista. Si quieres una cuenta regresiva adecuada. Debes medir el tiempo entre 2 invocaciones y ajustar el intervalo de 1000ms.
about 4 years ago · Juan Pablo Isaza Denunciar

0

Puedo darle algunos consejos para que pruebe en función de la pregunta que está haciendo y el código que ha proporcionado como referencia.

  1. No pase ninguna dependencia en useEffect ya que se ejecutará solo cuando cambie la dependencia. Mantenga la matriz de dependencia en blanco, entonces funcionará como componenteDidMount().
  2. Simplemente puede usar la función setTimeOut() para esperar 60 segundos cuando el componente está montado y luego hacer su lógica en eso.
  3. No recomiendo usar setSeconds en useEffect cuando su dependencia es la propia variable de segundos. Esto podría causar un renderizado infinito (como se indica en una de las respuestas aquí).

Edición 1: Entonces, lo que estoy haciendo a continuación es cambiar la variable de estado a 1 con un clic de botón para simular su escenario. Luego, en un useEffect, estoy configurando un intervalo para hacer -1 para la variable de seconds , que es 5 aquí, pero puede hacer que sea 60. Al desmontar, el intervalo se borrará. El segundo useEffect es simplemente registrar cuando los seconds cambian cada segundo.

 const[state,setState]=useState(0) const[seconds, setSeconds]=useState(5) useEffect(()=>{ let secondsInterval; if(state===1){ secondsInterval=setInterval(()=>{ setSeconds(prev=>prev-1) },1000) } return()=>clearInterval(secondsInterval) },[state]) useEffect(()=>{ console.log("Time remaining: "+seconds); },[seconds])
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda