useEffect依赖数组含index时重复输出名称及undefined问题求助

学习useEffect时，使用包含数组index的非空依赖数组，遇到两个问题：一是出现重复名称输出，二是最后持续输出undefined。代码及运行结果如下：

let users = ['Oliver', 'Thomas', 'George', '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!');
    setTimeout(() => setIndex(index => index + 1), 1000)
    if (index === users.length - 1) {
      return
    }
  }, [index])
}

运行结果：

RENDER
Hello Oliver
Side Effect RUNS!
RENDER
Hello Thomas
Side Effect RUNS!
RENDER
Hello George
Side Effect RUNS!
RENDER
Hello George
Side Effect RUNS!
RENDER
Hello William
Side Effect RUNS!
RENDER
Hello undefined
Side Effect RUNS!
RENDER
Hello undefined
Side Effect RUNS!
RENDER
Hello undefined
Side Effect RUNS!

1. 重复名称输出问题 #

运行结果里的两个Hello George是因为你的users数组本身就包含两个连续的George元素，属于数据本身的重复，并非代码逻辑错误。如果需要避免输出重复的名称，可以添加判断逻辑，记录上一次输出的用户名，仅当当前用户名与上一次不同时才输出：

修改后的代码片段：

export default function App() {
  const [index, setIndex] = useState(0);
  const [lastName, setLastName] = useState(''); // 记录上一次输出的名称
  console.log('RENDER');
  useEffect(() => {
    const currentName = users[index];
    if (currentName && currentName !== lastName) {
      console.log('Hello ' + currentName);
      setLastName(currentName);
    }
    console.log('Side Effect RUNS!');
    // 其他逻辑...
  }, [index, lastName])
}

2. 持续输出undefined的问题 #

当index增长到users.length - 1（即4，对应William）时，代码里的return语句不会阻止setTimeout执行——因为定时器是在if判断之前调用的。定时器依然会触发，把index变成5，此时users[5]不存在，输出undefined；同时因为index=5不等于users.length-1，又会创建新的定时器，导致无限循环触发useEffect，持续输出undefined。

解决办法：

• 仅当index未达到数组最后一个元素时，才创建定时器；
• 在useEffect的清理函数中取消定时器，避免内存泄漏。

修改后的完整代码：

let users = ['Oliver', 'Thomas', 'George', 'George', 'William']
export default function App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  
  useEffect(() => {
    // 当index超出数组范围时直接返回，避免输出undefined
    if (index >= users.length) return;
    
    console.log('Hello ' + users[index]);
    console.log('Side Effect RUNS!');
    
    let timer;
    // 仅当不是最后一个元素时，才设置定时器
    if (index !== users.length - 1) {
      timer = setTimeout(() => setIndex(prev => prev + 1), 1000);
    }
    
    // 清理函数：组件卸载或依赖变化时取消定时器
    return () => clearTimeout(timer);
  }, [index])
}

修改后运行结果会停在Hello William，不会再输出undefined，也不会无限触发渲染。

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