React中如何实现数组无限循环遍历，解决轮播跳转异常问题

• 你直接在组件顶层调用setInterval，每次组件因为状态更新重渲染时，都会创建一个新的定时器，多个定时器同时运行就会出现跳步、闪现的异常表现。
• 定时器回调存在闭包陷阱：首次渲染创建的定时器回调拿到的currentItemIndex永远是初始值0，无法获取最新的状态值，判断逻辑完全不符合预期。
• 你的clearInterval调用没有传入定时器ID，根本不会生效，且你的需求是无限循环，本来也不需要清除定时器。
• 你写的JSX里存在未正确闭合的p标签，会导致渲染结构异常，也会加重表现问题。

使用useEffect包裹定时器逻辑，配合状态的函数式更新、取模运算即可实现无限循环轮播：

import { useState, useEffect, useRef } from 'react';

const items = [
    {name: "item 0"},
    {name: "item 1"},
    {name: "item 2"}
];

function LoopItem() {
  const [currentItemIndex, setCurrentItemIndex] = useState(0);
  const timerRef = useRef(null);

  useEffect(() => {
    // 仅在组件挂载时注册一次定时器
    timerRef.current = setInterval(() => {
      // 函数式更新可以拿到最新的索引值，取模运算自动实现到末尾后回到头部的循环逻辑
      setCurrentItemIndex(prevIndex => (prevIndex + 1) % items.length);
    }, 5000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timerRef.current);
  }, []); // 空依赖数组保证effect只在挂载和卸载时执行

  return (
    <div>
      <p>{items[currentItemIndex].name}</p>
    </div>
  );
}

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