为何仅第一种方法能重置index为0，其余方法失效？

我正在开发一个NewsCardComponent组件，用来展示通过props传入的图片数组轮播效果。每次使用组件时，图片数组的元素数量可能不一样。我把imgArr作为img标签的src属性值：

<img src={imgArr[index]}>

其中index是状态值，需要在遍历到数组末尾时自动重置为0。我已经用方法1实现了需求，但搞不懂为什么方法2和方法3没法正常工作。

我的useEffect代码 #

useEffect(() => {
  const interval = setInterval(() => {
    indexResetter();
  }, 2000);

  return () => {
    clearInterval(interval);
  };
}, []);

三种实现方法 #

方法1（正常工作） #

function indexResetter() {
  setIndex((prev) => {       
    let newIndex = prev + 1;       
    if (newIndex > imgArr.length - 1) {                 
      newIndex = 0;       
    }       
    return newIndex;     
  }); 
}

方法2（状态无法重置为0，持续无限增长） #

function indexResetter() {
  let newIndex = index + 1;
  if (newIndex === imgArr.length - 1) {
    setIndex(0);
  } else {
    setIndex((prev) => prev + 1);
  }
}

方法3（与方法2问题相同） #

function indexResetter() {
  if (index >= imgArr.length - 1) {
    setIndex(0);
  } else {
    setIndex((prev) => prev + 1);
  }
}

问题原因分析 #

核心问题：闭包捕获的旧状态 #

你的useEffect依赖项是空数组[]，只会在组件挂载时执行一次。里面的setInterval回调会捕获到挂载时的index初始值（比如0），之后这个index在闭包里就固定不变了。

• 方法1的正确逻辑
  它使用了setIndex的函数式更新，每次都会获取到最新的prev状态值，完全不依赖外部的index变量。不管闭包里的index是不是旧值，都能基于最新状态计算下一个索引，自然能正确重置。

• 方法2、3的失效原因
  这两个方法直接引用了外部的index变量，但这个变量是闭包捕获的初始值，永远不会更新。比如初始index是0，每次执行indexResetter时，判断条件里的index始终是0，永远触发不了setIndex(0)的逻辑，只会一直执行setIndex(prev => prev+1)，导致索引无限增长。

另外方法2还有额外的逻辑错误：判断条件是newIndex === imgArr.length -1，就算index能正常更新，当数组长度为3时，索引到2（最后一位）时newIndex是3，并不等于2，所以也不会触发重置逻辑。

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