重复使用names的useEffect在数组中

Question

我在这个网站上找到了这个练习；我正在测试这个，因为我也在学习React中的hooks。

我不明白为什么当你输入一个与数组中已有的名字相同的名字时，useEffect的执行会停止。

它不应该跳过重复的名字然后继续执行下一个吗？还是我做错了什么？

let users = ['Oliver', 'Thomas', 'George', 'George', 'William']
export default function App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    setTimeout(() => setIndex(index => index + 1), 1000)
    console.log('Hello ' + users[index]);
    console.log('Side Effect RUNS!');
    if (index === users.length - 1) {
      return
    }
  }, [users[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]);