Pourquoi mon hook React `setInterval` ne parvient-il pas à mettre à jour l'état correctement ?

State Trap dans le hook setInterval de React

Lors de l'utilisation du hook useState de React dans setInterval, il est crucial d'être conscient d'un défi potentiel : les mises à jour d'état peut ne pas refléter comme prévu.

Dans l'exemple de code fourni, malgré les tentatives d'incrémentation de l'état temporel chaque seconde, il reste bloqué à 0. En effet, le rappel dans setInterval est lié à la valeur de temps initiale et n'a pas accès aux mises à jour d'état ultérieures.

Solution : utilisation du formulaire de rappel useState

Pour résoudre ce problème, utilisez le formulaire de rappel de useState. Cela permet au rappel d'accéder à la valeur de l'état actuel avant de la mettre à jour.

setTime(prevTime => prevTime + 1); // Updates based on current state

Mise à jour de la mise en œuvre :

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

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

Bonus : approches alternatives

Pour plus d'informations sur la gestion de setInterval avec des hooks, reportez-vous au billet de blog de Dan Abramov, qui explore des méthodes alternatives, telles que l'utilisation d'une référence ou du hook useReducer.

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!