使用React Hooks和setInterval实现轮播图时计数器无法复位问题

• 闭包陷阱：你给useEffect配置了空依赖数组，这个副作用仅会在组件首次挂载时执行1次，定时器回调捕获的imgSource永远是首次渲染的初始值0，因此你的判断条件永远基于初始值判定，自然不会触发复位逻辑，表现出来就是计数器会一直累加。
• 复位阈值错误：你的需求是5张图索引到4时复位，但当前代码里写的判断条件是imgSource <=1，和需求不匹配。

直接在setImgSource的函数式更新回调中做判断即可，不需要额外给useEffect加依赖，函数式更新的入参永远是最新的状态值，完美避开闭包问题：

import React, { useState, useEffect } from 'react';
import { photoSource } from './photo-source.js';

function Slideshow() {
  const [imgSource, setImgSource] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setImgSource(prev => {
        // 通用写法，后续新增图片无需修改阈值
        return prev >= photoSource.length - 1 ? 0 : prev + 1;
      })
    }, 10000);
    return () => clearInterval(intervalId);
  }, []);

  console.log('ImgSource: ' + imgSource);
  console.log(imgSource <= photoSource.length - 1);
  console.log(photoSource[imgSource].src);
  // 可在此处补充其他渲染逻辑
  return <img src={photoSource[imgSource].src} alt="轮播图" />
}

内容的提问来源于stack exchange，提问作者Gašper Babnik