useEffect為什麼會忽略陣列的最後一個元素？

Question

我正在學習React，特別是學習useEffect。

我無法弄清楚的是為什麼useEffect跳過了陣列的最後一個元素。

請問有人可以友善地解釋為什麼以及如何修復嗎？

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

}

Answer 1

您的useEffect不會運​​行，因為users[index]的值相同

將其更改為index

#

let users = ['Oliver', 'Thomas', 'George', 'William']
export default function App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    if (index === users.length - 1) {
      return
    }
    setTimeout(() => setIndex(index => index + 1), 2000)
    console.log('Hello ' + users[index]);
    console.log('Side Effect RUNS!');
  }, [index]) // 更改为 `[index]`

}