React中setInterval函数异常：执行间隔持续缩短求助

• 你把setInterval直接写在组件函数顶层，每次组件因状态更新（调用setIndex）触发重渲染时，都会新建一个独立的定时器。
• 这些定时器不会自动销毁，会同时运行，多个定时器共同触发状态更新，导致图片切换的实际间隔被压缩，看起来切换速度越来越快。
• 另外，定时器回调里的index是闭包捕获的渲染时旧值，会导致状态更新逻辑出错（比如可能跳过索引或重复设置）。

用useEffect管理定时器生命周期，确保组件仅在挂载时创建一个定时器，卸载时清除定时器，同时用函数式更新获取最新状态值。

修正后的代码：

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import p1 from '../images/slider-badag.jpg';
import p2 from '../images/slider-badging.jpg';
import p3 from '../images/slider-scale.jpg';
import p4 from '../images/slider-scales.jpg';

const ImgSlider = () => {
    const imgArr = [p1, p2, p3, p4];
    const [index, setIndex] = useState(0);

    useEffect(() => {
        // 创建单次定时器
        const intervalId = setInterval(() => {
            // 函数式更新获取最新index值
            setIndex(prevIndex => {
                return prevIndex < imgArr.length - 1 ? prevIndex + 1 : 0;
            });
        }, 3000);

        // 组件卸载/依赖变化时清除定时器
        return () => clearInterval(intervalId);
    }, [imgArr.length]); // 依赖图片数组长度，长度变化时重建定时器

    return (
        <>
            <Wrapper imgUrl={imgArr[index]} />
        </>
    );
}

const Wrapper = styled.div`
    border: 1px solid red;
    height: calc(160%/3);
    background-image: url(${(props) => props.imgUrl});     
    z-index: 10;
    overflow: hidden;
`

export default ImgSlider;

关键修改说明：

• useEffect包裹定时器：通过依赖控制，确保定时器仅在组件挂载时创建一次，不会重复生成。
• 清理定时器：返回的清理函数会在组件卸载或依赖项变化时清除旧定时器，避免内存泄漏和多定时器共存。
• 函数式更新setIndex：setIndex(prevIndex => ...)确保每次获取的都是最新状态值，解决闭包导致的旧值问题。

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