React自定义图片旋转组件运行异常：状态切换过快、旋转失控问题求助

• 1. useEffect清理函数写法错误：原代码中return clearInterval(interval)是立即执行定时器清理逻辑，而非返回一个在effect卸载/重执行前调用的清理函数，相当于没有生效的定时器清理逻辑，运行过程中会产生大量泄漏的定时器，最终导致状态频繁切换、转速异常。
• 2. useEffect依赖项设置不合理：将Timer作为依赖项，每次Timer更新都会重新触发effect执行，反复创建新的定时器，进一步加剧定时器泄漏问题。
• 3. 定时器回调中直接读取闭包捕获的Timer状态，属于不规范的状态读取写法，复杂场景下容易出现值过期问题。

Spinner组件代码 #

import classes from './Spinner.module.css'
import { useState, useEffect } from 'react';

const Spinner = (props) => {
    const [timer, setTimer] = useState('5');

    useEffect(() => {
        const interval = setInterval(() => {
            // 使用函数式更新直接拿到最新状态，不需要依赖timer
            setTimer(prevTimer => prevTimer === '5' ? '1' : '5');
        }, 2000);
        
        // 返回清理函数，在effect重执行/组件卸载时清理定时器
        return () => clearInterval(interval);
    }, []); // 依赖项留空，仅在组件挂载时执行一次
    
    return <img style={{animation: `${classes.spin} ${timer}s linear infinite`}} src={props.img} alt="旋转图片"/>
};

export default Spinner;

CSS代码无需修改，保持原有逻辑即可： #

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

• 1. 将清理函数改为返回箭头函数() => clearInterval(interval)，保证仅在effect需要销毁时才执行定时器清理
• 2. 移除依赖数组中的Timer，改用setTimer的函数式更新写法读取最新状态，effect仅在组件挂载时执行一次，只会创建一个定时器，不会出现泄漏问题
• 3. 调整状态命名规范为小驼峰，符合React通用代码规范

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