React中如何每秒递增状态变量实现图片自动轮播效果

• 核心是React闭包陷阱导致的：你写的useEffect依赖项是空数组，只会在组件首次挂载时执行一次，内部引用的increment函数捕获的是首次渲染时的currImageIndex（值永远是0）和url变量，所以你在increment里打印currImageIndex才会一直输出0。
• 判断逻辑用了捕获的旧currImageIndex，所以0+1 < 2的判断永远成立，只会一直执行加1操作，永远走不到重置为0的分支。

推荐用下面更简洁的写法，直接在状态更新回调里获取最新的索引值判断，完全规避闭包问题：

const { url } = props;
const [currImageIndex, setCurrImageIndex] = useState(0);

useEffect(() => {
  const id = setInterval(() => {
    setCurrImageIndex(oldCount => {
      // 直接在回调里拿最新的索引值计算，不受闭包影响
      return oldCount + 1 >= url.length ? 0 : oldCount + 1
    })
  }, 1000);
  return () => clearInterval(id);
// 仅需要把url加入依赖数组，适配url长度动态变化的场景
}, [url]);

return (
  <div className={styles.container}>
    <div className={styles.header}>Preview of GIF:</div>
    <img src={url[currImageIndex]} alt="GIF Preview" className={styles.image} />
    <div>{currImageIndex}</div>
  </div>
);

该方案不需要频繁清理重建定时器，性能更优，也能实现0→1→0→1的循环效果。

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