如何在React.js中逐个显示数组文本，每5秒切换且最后文本消失

你的代码存在几个关键问题：

• 函数组件每次渲染都会重新声明let index = 0，导致索引无法持续递增
• 未清理setInterval，会引发内存泄漏
• 索引判断逻辑错误，且未实现“最后一个文本显示后消失”的需求

以下是修复后的代码：

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

const Introduction = () => {
    const texts = ["text1", "text2", "text3"];
    const [text, setText] = useState("text1");
    const indexRef = useRef(0);
    const timerRef = useRef(null);

    useEffect(() => {
        timerRef.current = setInterval(() => {
            indexRef.current++;
            if (indexRef.current < texts.length) {
                // 还没到最后一项，切换到下一个文本
                setText(texts[indexRef.current]);
            } else if (indexRef.current === texts.length) {
                // 最后一项显示5秒后，清空文本并停止定时器
                setText("");
                clearInterval(timerRef.current);
            }
        }, 5000);

        // 组件卸载时清理定时器
        return () => clearInterval(timerRef.current);
    }, []);

    return (
        <div>
            <div className='introduction-text'>
                {text && <h1>{text}</h1>}
            </div>
        </div>
    );
};

export default Introduction;

关键说明： #

• useRef：用来保存索引和定时器ID，避免每次组件渲染时重置变量值
• useEffect：仅在组件挂载时初始化一次定时器，并通过返回函数在组件卸载时清理定时器，防止内存泄漏
• 逻辑调整：
  • 索引递增到数组长度时，清空文本并停止定时器，实现“最后一个文本消失”的需求
  • 通过{text && <h1>{text}</h1>}确保文本为空时不渲染<h1>标签

如果需要循环展示（显示完最后一个消失后，重新从第一个开始），可以修改逻辑：

timerRef.current = setInterval(() => {
    indexRef.current++;
    if (indexRef.current < texts.length) {
        setText(texts[indexRef.current]);
    } else {
        // 最后一项显示5秒后清空，然后重置索引，下一轮从第一个开始
        setText("");
        setTimeout(() => {
            indexRef.current = 0;
            setText(texts[indexRef.current]);
        }, 5000);
    }
}, 5000);

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