如何在React中按固定间隔依次切换文本并遍历完数组后停止？

可以通过 React 的 useState、useEffect 和 useRef 组合实现这个需求，以下是完整的组件示例：

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

function SequentialTextUpdater() {
  // 定义需要展示的字符串列表
  const textList = ['文本1', '文本2', '文本3'];
  // 维护当前显示文本的索引
  const [currentIdx, setCurrentIdx] = useState(0);
  // 存储定时器ID，用于后续清除
  const timerId = useRef(null);

  useEffect(() => {
    // 只有当索引未遍历完所有元素时，才启动定时器
    if (currentIdx < textList.length) {
      timerId.current = setInterval(() => {
        setCurrentIdx(prevIdx => {
          const nextIdx = prevIdx + 1;
          // 若下一个索引超出数组范围，立即清除定时器
          if (nextIdx >= textList.length) {
            clearInterval(timerId.current);
          }
          return nextIdx;
        });
      }, 3000);
    }

    // 组件卸载或索引更新时，清除旧的定时器
    return () => clearInterval(timerId.current);
  }, [currentIdx, textList.length]);

  return <p>{textList[currentIdx]}</p>;
}

export default SequentialTextUpdater;

关键逻辑说明： #

• 状态管理：用 currentIdx 记录当前显示文本的位置，初始指向第一个元素。
• 定时器控制：通过 useRef 保存定时器ID，确保能在合适的时机清除定时器，避免内存泄漏。
• 停止条件：每次更新索引前判断，当下一个索引超出数组长度时，立即清除定时器，终止后续更新。
• 副作用清理：useEffect 的返回函数会在组件卸载或 currentIdx 变化时清除旧定时器，防止多个定时器同时运行。

如果需要修改文本列表或时间间隔，直接调整 textList 数组和 setInterval 的第二个参数即可。

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