重複使用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]);