Next.js函数组件中setInterval仅切换一次背景图的问题解决

问题原因 #

1. 闭包陷阱：你的useEffect依赖数组为空，导致setInterval回调里的currentImage始终是初始值"/a.jpg"，第一次切换到"/b.jpeg"后，后续回调仍会判断currentImage为"/a.jpg"，重复执行相同操作，无法继续切换。
2. 拼写错误：代码里将"/b.jpeg"误写为"/b.jg"，即使状态切换成功，后续判断也无法匹配"/b.jpeg"，导致逻辑中断。

修复方案 #

方案一：使用函数式更新状态

通过函数式更新获取最新的状态值，避免闭包带来的旧值问题，同时修正拼写错误：

const [currentImage, setCurrentImage] = useState<string>("/a.jpg");
useEffect(() => {
  const intervalId = setInterval(() => {
    setCurrentImage(prevImage => {
      if (prevImage === "/a.jpg") {
        return "/b.jpeg";
      } else if (prevImage === "/b.jpeg") {
        return "/c.jpg";
      } else {
        return "/a.jpg";
      }
    });
  }, 6000);
  return () => clearInterval(intervalId);
}, []);

方案二：添加状态到useEffect依赖数组

将currentImage加入依赖数组，每次状态更新时重新创建定时器，同时清理旧定时器：

const [currentImage, setCurrentImage] = useState<string>("/a.jpg");
useEffect(() => {
  const intervalId = setInterval(() => {
    if (currentImage === "/a.jpg") {
      setCurrentImage("/b.jpeg");
    } else if (currentImage === "/b.jpeg") {
      setCurrentImage("/c.jpg");
    } else {
      setCurrentImage("/a.jpg");
    }
  }, 6000);
  return () => clearInterval(intervalId);
}, [currentImage]);

优化方案：用数组索引管理切换

把图片路径存入数组，通过索引循环切换，代码更简洁易维护：

const images = ["/a.jpg", "/b.jpeg", "/c.jpg"];
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
  const intervalId = setInterval(() => {
    // 取模运算实现循环
    setCurrentIndex(prevIndex => (prevIndex + 1) % images.length);
  }, 6000);
  return () => clearInterval(intervalId);
}, []);

// 使用时直接取对应索引的图片：images[currentIndex]

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