Répétez useEffect des noms dans le tableau

Question

J'ai trouvé cet exercice sur ce site Web ; je le teste car j'apprends également des hooks dans React.

Je ne comprends pas pourquoi l'exécution de useEffect s'arrête lorsque vous entrez un nom identique à celui déjà présent dans le tableau.

Ne devrait-il pas ignorer les noms en double et passer au suivant ? Ou est-ce que je fais quelque chose de mal ?

laisser les utilisateurs = ['Oliver', 'Thomas', 'George', 'George', 'William']
exporter la fonction par défaut App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    setTimeout(() => setIndex(index => index + 1), 1000)
    console.log('Bonjour' + utilisateurs[index]);
    console.log('Side Effect RUNS!');
    if (index === users.length - 1) {
      retour
    }
  }, [utilisateurs[index]])
}

            

Answer 1

Effets secondaires dans les boucles : la façon dont vous utilisez setTimeout et setIndex dans useEffect peut provoquer un comportement inattendu. useEffect est exécuté après chaque rendu, et l'utilisation de l'état d'index directement dans le rappel setTimeout peut provoquer des problèmes car la fermeture capture la valeur de l'état lors de la création du rappel.

Accès aux éléments du tableau : vous essayez d'accéder à un élément du tableau des utilisateurs à l'aide d'un index, mais en raison de la nature asynchrone de useEffect et du délai, cela peut dépasser la portée du tableau.

const [index, setIndex] = useState(0);

  useEffect(() => {
    console.log('RENDER');
    console.log('副作用运行！');
    
    if (index >= users.length) {
      return;
    }

    const timeoutId = setTimeout(() => {
      console.log('你好 ' + users[index]);
      setIndex(index + 1);
    }, 1000);

    return () => clearTimeout (timeoutId);
  }, [index]);