setInterval Re-rendu illimité des composants de réaction complète. Pourquoi cela se produit-il et comment y remédier ?
P粉978742405
P粉978742405 2024-04-03 15:39:05
0
1
402

Voici mon code de réaction. Cela rend le composant à nouveau rendu à l'infini :

const [seconds, setSeconds] = useState(60)
useEffect(() => {
    const interval = setInterval(() => {
        setSeconds(seconds => seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
}, []);

console.log("object");

P粉978742405
P粉978742405

répondre à tous(1)
P粉476046165

Cela se produit parce que vous n'effacez l'intervalle que lorsque le composant est déchargé, ce qui ne se produit que lorsque l'utilisateur quitte la page.

C'est peut-être ce dont vous avez besoin ? Lorsque l'intervalle atteint 0, je l'efface. Mais pour cela, je dois utiliser la référence, je ne peux pas utiliser l'état de setInterval car il n'a qu'une valeur initiale :

export default function App() {
  const [seconds, setSeconds] = useState(5);
  const secondsRef = useRef(seconds);

  useEffect(() => {
    const interval = setInterval(() => {
      if (secondsRef.current  seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  console.log("running", new Date());

  return 

{seconds ; }

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!