React中定时切换数组图片src时卡在第二张的问题排查

你遇到的是React Hooks最常见的闭包陷阱问题，具体触发逻辑：

• 你给useEffect传入了空依赖数组[]，该副作用只会在组件首次挂载时执行1次，其中注册的setInterval回调会永久持有首次渲染生成的闭包作用域，这个作用域内的imageIndex值永远是初始值0。
• 定时器第一次触发时，判断闭包内的imageIndex=0，不是数组最后一位，执行setImageIndex(1)，组件重渲染展示第二张图。
• 后续每次定时器触发，回调拿到的永远是首次渲染闭包里的imageIndex=0，只会重复执行setImageIndex(1)，索引永远不会继续递增，因此卡在第二张图不再变化。
• 额外两个隐患：一是没有编写定时器清除逻辑，组件卸载后定时器仍会运行，造成内存泄漏；二是switchImage里的return imageIndex完全无效，setState是异步行为，同步返回拿到的永远是闭包内的旧值，拿不到更新后的状态。

核心是规避闭包对旧状态的引用，同时补上定时器清理逻辑，两种常用写法都可以：

写法1：函数式更新+空依赖（最简洁） #

直接在状态更新时使用函数式入参，React会自动把最新的状态值传入更新函数，完全不依赖外部闭包的状态变量，空依赖也不会出问题：

const images = [img1, img2, img3, img4, img5, img6];

function Carousel() {
  const [imageIndex, setImageIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      // 函数式更新，prev永远是最新的索引值
      setImageIndex(prev => prev === images.length - 1 ? 0 : prev + 1);
    }, 1000);
    // 组件卸载/effect重跑前清除上一个定时器
    return () => clearInterval(timer);
  }, []);

  return <img src={images[imageIndex]} alt="carousel" />;
}

写法2：抽离切换函数+useCallback #

如果需要在其他地方（比如手动点击切换按钮）复用切换逻辑，可以把切换逻辑抽离出来，用useCallback缓存函数，同时保持函数内使用状态函数式更新：

const images = [img1, img2, img3, img4, img5, img6];

function Carousel() {
  const [imageIndex, setImageIndex] = useState(0);

  const switchImage = useCallback(() => {
    setImageIndex(prev => prev === images.length - 1 ? 0 : prev + 1);
  }, []);

  useEffect(() => {
    const timer = setInterval(switchImage, 1000);
    return () => clearInterval(timer);
  }, [switchImage]);

  return <img src={images[imageIndex]} alt="carousel" />;
}

关键修改点 #

• 所有状态更新依赖前序状态的场景，优先用函数式更新写法，完全规避闭包拿旧值的问题
• 所有setInterval/setTimeout/事件监听这类副作用，必须在useEffect的返回函数中做清除处理，避免内存泄漏
• 删除无意义的状态return逻辑，不要尝试在setState调用后同步获取新状态，需要监听状态变化请单独使用useEffect绑定对应依赖。

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