Pourquoi mon état React ne se met-il pas à jour dans « setInterval » ?

L'état ne se met pas à jour lors de l'utilisation de React State Hook dans setInterval

Dans la nouvelle fonctionnalité Hooks de React, le composant Clock est conçu pour afficher une valeur temporelle qui augmente chaque seconde. Malgré le fonctionnement de la minuterie, la valeur temporelle reste stagnante à un.

La cause du problème

La racine de ce problème réside dans la fermeture de setInterval. La fonction de rappel au sein de cette fermeture n'a accès qu'à la valeur initiale de la variable time. Comme la fonction useEffect() ne s'exécute pas après le premier rendu, le rappel ne reçoit pas les valeurs temporelles suivantes.

Accès aux valeurs temporelles

Par conséquent, la variable temporelle est toujours porte la valeur initiale de zéro dans le rappel pour setInterval.

Solution : utiliser la forme d'état de rappel Hooks

Semblables à la méthode traditionnelle setState, les hooks d'état offrent deux options : la première accepte un état mis à jour, tandis que le formulaire de rappel reçoit l'état actuel. Pour résoudre ce problème, il est recommandé d'utiliser le formulaire de rappel et d'acquérir la valeur d'état la plus récente avant d'incrémenter dans le rappel setState.

Approches alternatives

Article de blog de Dan Abramov explore l'utilisation de setInterval avec des hooks, présentant différentes solutions à ce problème. Sa lecture est fortement recommandée.

Code mis à jour

Le code ci-dessous démontre l'implémentation corrigée :

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(prevTime => prevTime + 1); // <-- Change this line!
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (<div>Seconds: {time}</div>);
}

ReactDOM.render(<Clock />, document.querySelector('#app'));

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!