Wiederholen Sie den useEffect der Namen im Array

Question

Ich habe diese Übung auf dieser Website gefunden. Ich teste sie, da ich auch Hooks in React lerne.

Ich verstehe nicht, warum die Ausführung von useEffect stoppt, wenn Sie einen Namen eingeben, der mit einem bereits im Array vorhandenen identisch ist.

Sollte es nicht doppelte Namen überspringen und mit dem nächsten fortfahren? Oder mache ich etwas falsch?

let users = ['Oliver', 'Thomas', 'George', 'George', 'William']
Standardfunktion App() exportieren {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    setTimeout(() => setIndex(index => index + 1), 1000)
    console.log('Hallo ' + Benutzer[Index]);
    console.log('Nebeneffekt LÄUFT!');
    if (index === Benutzer.Länge - 1) {
      zurückkehren
    }
  }, [Benutzer[Index]])
}

Answer 1

在循环中的副作用：你在useEffect中使用setTimeout和setIndex的方式可能会导致意外的行为。useEffect在每次渲染后执行，并且在setTimeout回调中直接使用index状态可能会引起问题，因为闭包在创建回调时会捕获状态值。

访问数组元素：你试图使用索引访问users数组的元素，但由于useEffect和延迟的异步性质，可能会超出数组的范围。

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]);