Rando2.js
import React, { useState } from 'react'; const Rando2 = (props) => { const [num, setNum] = useState(0); const changeNum = () => { setInterval(()=>{ let newNum = Math.floor(Math.random()*props.maxNum); setNum(newNum); }, 1000) } changeNum(); return ( <h1>{num}</h1> ) } export default Rando2;En el código anterior, no hay errores, los padres proporcionan los accesorios {maxNum: 15}, por lo que está bien. El problema es que espero que el número se cambie una vez por segundo, lo hace al principio, pero a medida que pasa el tiempo, la frecuencia del cambio de número aumenta drásticamente, como 10 veces por segundo, luego 20 veces o 30 veces. .. sobre eso.
Ahora, ¿hay algún problema en el código? ¿Por qué el cambio en el número no siempre es constante... como una vez por segundo, según el código?
El problema es que cada vez que num state cambia, está configurando un nuevo tiempo de espera o intervalo. Entonces, cada vez que este componente se ejecuta o vuelve a renderizar, tiene un intervalo adicional, que establece el nuevo número en una cadencia diferente, junto con el intervalo original. En su lugar, solo necesita establecer el tiempo de espera cuando el componente se carga por primera vez.
useEffect(() => { val interval = setInterval(...code...) return () => {clearInterval(interval)} }, [])En el código anterior, se programa un nuevo setInterval después de cada procesamiento después de que a veces se ejecutan varios intervalos a la vez
Programe setInterval en el renderizado inicial usando Effect Hook para que ejecute el intervalo después de cada segundo
useEffect(()=>{ setInterval(()=>{ let newNum = Math.floor(Math.random()*props.maxNum); setNum(newNum); }, 1000) return () => {clearInterval(interval)} },[])