繰り返し使用配列内の名前の効果

Question

この Web サイトでこの演習を見つけました。React のフックも学習しているので、これをテストしています。

配列内に既に存在する名前と同じ名前を入力すると useEffect の実行が停止する理由がわかりません。

重複する名前をスキップして次の名前に進むべきではないでしょうか?それとも私が何か間違ったことをしているのでしょうか？

let users = ['オリバー', 'トーマス', 'ジョージ', 'ジョージ', 'ウィリアム']
デフォルト関数 App() をエクスポート {
  const [インデックス, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    setTimeout(() => setIndex(インデックス => インデックス 1), 1000)
    console.log('Hello ' ユーザー[インデックス]);
    console.log('副作用が発生しました!');
    if (インデックス === users.length - 1) {
      戻る
    }
  }, [ユーザー[インデックス]])
}

Answer 1

ループ内の副作用: useEffect での setTimeout および setIndex の使用方法により、予期しない動作が発生する可能性があります。 useEffect は各レンダリング後に実行され、setTimeout コールバックでインデックス状態を直接使用すると、コールバックの作成時にクロージャが状態値をキャプチャするため、問題が発生する可能性があります。

配列要素へのアクセス: インデックスを使用して users 配列の要素にアクセスしようとしていますが、useEffect と遅延の非同期の性質により、配列のスコープを超える可能性があります。

リーリー