0

Buen día colegas. Tengo un inconveniente. A penas estoy comenzando pero creo entender lo suficiente de este hook (useState), hasta ahora. Comportamiento esperado: Una frase que cambie cada x segundos, pasandole un arreglo de frases -> introducir la descripción de la imagen aquí

Es un comportamiento bastante sencillo, creí yo. Tengo un arreglo (frases), luego instancio el hook. En un intervalo creo un número aleatorio y cambio el estado por la posición del arreglo en el número aleatorio:

const Frases = () => {

 const frases = [
    "Solvitur ambulando.",
    "Todo en lo que creas, existe.",
    "Fortis fortuna adiuvat.",
    "Don't raise your voice, improve your argument.",
    "Either you run the day, or the day runs you?",
    "Son hartas pero es que ahorita no me acuerdo bien xD"
 ];

 const [ frase, setFrase ] = useState(frases[1]); // Le doy ese valor por default para que empiecec con una frase y no en blanco.

 var aleatorio;

 setInterval( function(){
    let largoFrases = frases.length - 1;
    aleatorio = Math.trunc(Math.random() * (largoFrases + 1));
    setFrase(frases[aleatorio]);
 }, 5000);

 return (
    <div className="Frases">
        <p className="frase">"
            { frase } "</p>
    </div>
 );

};

Funciona pero de una manera peculiar. No sé cómo mostrarlo. Pero al principio sirve relativamente bien (se cambia pero antes de detenerse pasa por otras frases antes muy rápido) Y poco a poco la velocidad va en aumento, y en unos minutos empieza a pasarse súper rápido. No comprendo porqué aumenta la velocidad y no sé porqué se comporta así. Espero haberme explicado bien. Gracias de antemano.

3
  • Hola puedes subir tu código aqui Codesndbox para poder visualizar el comportamiento de tu componente, edita tu pregunta y coloca el link de tu código.
    – Michael
    Commented el 9 feb. 2022 a las 0:11
  • Parece un ejemplo mínimo válido, ¿@Michael puedes responder? o algún otro colega que quiera aportar, saludos
    – g.4
    Commented el 9 feb. 2022 a las 0:32
  • Claro que sí, @Michael. Mira: codesandbox.io/s/icy-fire-sibff, ese fue el link que me dio la web, espero que se vea. Si dejas correr el archivo unos minutos empieza a cambiar super rápido. Commented el 9 feb. 2022 a las 0:49

1 respuesta 1

0

No es que vaya más rápido, se tiene que limpiar el intérvalo anterior, porque sino se crean muchos y "parece" ser que va más rápido pero en realidad son muchos intérvalos corriendo en paralelo, no tuve mucho tiempo para poner un buen ejemplo pero en tu código quedaría algo como esto:

Por cierto, recuerda solo pasar la función como parámetro a setInterval(function), no invocarla setInterval(function())

import "./styles.css";
import React, { useState } from "react";

const frases = [
  "Solvitur ambulando.",
  "Todo en lo que creas, existe.",
  "Fortis fortuna adiuvat.",
  "Don't raise your voice, improve your argument.",
  "Either you run the day, or the day runs you?",
  "Son hartas pero es que ahorita no me acuerdo bien xD"
];


const Frases = () => {
  
  const [frase, setFrase] = useState(frases[1]); // Le doy ese valor por default para que empiecec con una frase y no en blanco.
  
const crearAleatorio = () => {
  var aleatorio;
  let largoFrases = frases.length - 1;
  aleatorio = Math.trunc(Math.random() * (largoFrases + 1));
  setFrase(frases[aleatorio]);
}

const startCycle = () => {
  var cycle;
  cycle = setInterval(crearAleatorio, 5000);
  clearInterval(cycle)
}

startCycle()

  return (
    <div className="Frases">
      <p className="frase">"{frase} "</p>
    </div>
  );
};
export default Frases;
2
  • Estoy de acuerdo con lo que se menciona acerca del comportamiento de setInterval, pero no resuelve el problema, hay que darle un double check a esta respuesta, saludos
    – g.4
    Commented el 11 feb. 2022 a las 1:33
  • No, @Diego, no sé porqué usando tu código el estado directamente no cambia ☹️☹️. Creo que tiene algo que ver con startCycle() pero no sé. Commented el 11 feb. 2022 a las 4:28

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.