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 ->
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.