使用多张图片时动画异常：React轮播组件索引重复问题

问题描述 #

使用React和Tailwind开发个人项目时，实现6张图片轮播功能，代码运行后控制台输出图片索引序列异常（0,0,1,1,0,0,1,1,2,2...），动画效果混乱。

核心错误点及修复方案 #

1. useEffect未设置依赖项，导致重复创建定时器 #

你的useEffect没有指定依赖数组，每次组件渲染都会重新执行并创建新的定时器。多个定时器同时触发nextPicture，会导致索引被频繁修改，出现重复的索引值。

修复：
给useEffect添加空依赖数组，确保仅在组件挂载时创建一次定时器；同时添加清理函数，防止组件卸载后定时器继续运行导致内存泄漏。

React.useEffect(() => {
    const intervalId = setInterval(() => {
        nextPicture();
    }, 2500);
    // 组件卸载时清理定时器
    return () => clearInterval(intervalId);
}, []);

2. 闭包陷阱导致状态读取异常 #

nextPicture函数中直接读取的pictureIndex是组件初始渲染时的闭包值，不会随着状态更新而同步变化。每次定时器触发时，计算的newIndex都是基于旧的状态值，导致状态更新逻辑失效。

修复：
使用React的函数式更新获取最新状态值：

const nextPicture = () => {
    setPictureIndex(prevIndex => (prevIndex + 1) % pictures.length);
    // ... 其他逻辑
}

3. DOM类名操作逻辑错误 #

• 你在组件初始化时直接赋值node = animationRef.current，此时ref还未绑定到DOM节点，node会是null，后续类名操作全部无效
• className.replace仅返回新字符串，不会直接修改DOM元素的类名，无法触发动画效果

修复：
每次操作DOM时直接读取animationRef.current，并使用classListAPI来添加/移除类名：

const nextPicture = () => {
    setPictureIndex(prevIndex => (prevIndex + 1) % pictures.length);
    const node = animationRef.current;
    if (node) {
        node.classList.remove("fade-in");
        node.classList.add("fade-out");
    }
}

// 配合索引变化监听动画切换
React.useEffect(() => {
    const node = animationRef.current;
    if (!node) return;
    node.classList.remove("fade-in", "fade-out");
    setTimeout(() => {
        node.classList.add("fade-in");
    }, 10);
}, [pictureIndex]);

4. Tailwind类名错误 #

你使用的6xl、4xl不是有效的Tailwind字体大小类，正确的类名应该是text-6xl、text-4xl，否则字体样式不会生效。

完整修复后的代码 #

import React from "react";
import Images from "../images";

export default function PictureHeader() {
    const [pictureIndex, setPictureIndex] = React.useState(0);
    const animationRef = React.useRef<HTMLDivElement>(null);
    const pictures: string[] = Images.pictures;

    // 初始化定时器
    React.useEffect(() => {
        const intervalId = setInterval(() => {
            nextPicture();
        }, 2500);
        return () => clearInterval(intervalId);
    }, []);

    // 监听索引变化，触发淡入动画
    React.useEffect(() => {
        const node = animationRef.current;
        if (!node) return;
        node.classList.remove("fade-in", "fade-out");
        setTimeout(() => {
            node.classList.add("fade-in");
        }, 10);
    }, [pictureIndex]);

    const nextPicture = () => {
        // 函数式更新获取最新索引
        setPictureIndex(prevIndex => (prevIndex + 1) % pictures.length);
        // 触发淡出动画
        const node = animationRef.current;
        if (node) {
            node.classList.remove("fade-in");
            node.classList.add("fade-out");
        }
    }

    return (
        <div className="padding-10 top-0 inset-x-0 place-content-center">
            <div className="w-4/5 select-none relative rounded-lg">
                <div ref={animationRef} className="absolute content-left aspect-w-16 aspect-h-9 cover z-0">
                    <img src={pictures[pictureIndex]} alt="轮播图片" />
                </div>
                <div className="absolute inset-x-0 bottom-0 justify-items-center z-10">
                    <h1 className="text-6xl font-dancing">
                        Sierra and Adam
                    </h1>
                    <h2 className="text-4xl font-dancing">
                        Save the date for a match of the Millenia!
                    </h2>
                </div>
            </div>
        </div>
    );
}

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