React中useEffect为何跳过数组最后一个元素？求原因与修复方法

• 你的useEffect依赖项是users[index]，当index更新到最后一位（3，对应William）时，useEffect会正常触发，但你在effect开头的判断if (index === users.length - 1) { return }直接终止了后续所有逻辑，包括打印Hello William的代码，所以看起来最后一个元素被“跳过”了。
• 组件在index变为3时确实会重新渲染（你能看到RENDER日志），但因为effect提前return，没有执行打印逻辑，才造成了“跳过”的错觉。

根据需求分两种场景提供修复：

场景1：需要打印最后一个元素，同时停止自动递增 #

把打印逻辑放到判断之前，确保最后一个元素的打印代码能执行：

let users = ['Oliver', 'Thomas', 'George', 'William']
export default function App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    // 先执行打印逻辑，再判断是否继续递增
    console.log('Hello ' + users[index]);
    console.log('Side Effect RUNS!');
    
    if (index === users.length - 1) {
      return
    }
    setTimeout(() => setIndex(index => index + 1), 2000)
  }, [index]) // 直接依赖index比依赖users[index]更清晰，效果一致
}

调整后，每个元素（包括最后一个）都会执行打印逻辑，当到最后一个时，打印后直接return，不再触发timeout停止index递增。

场景2：保留递增终止逻辑，但处理最后一个元素 #

如果需要单独处理最后一个元素的逻辑，可以在return前添加对应代码：

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

• 原代码用users[index]做依赖项，虽然当前场景和依赖index效果一致，但如果users是动态变化的，可能导致不必要的effect触发，直接依赖index更稳妥。
• 你写的setIndex(index => index + 1)是正确的函数式更新写法，能避免闭包捕获旧index值的问题，这部分无需修改。

内容的提问来源于stack exchange，提问作者Aurora