React JS不使用图片滑块组件如何实现定时自动切换图片？

问题根因 #

• 存在React Hooks闭包陷阱：负责启动定时器的useEffect依赖项为空，内部读取的count永远是初始值0，多次执行后计数逻辑完全异常
• 未做定时器清除：组件销毁后定时器仍在后台运行，会引发内存泄漏，运行时间越长异常越明显
• 未做计数边界处理：count持续累加超过图片数组长度时，读取到的图片路径为undefined，自然无法正常显示
• 存在冗余状态：不需要单独维护image状态，直接通过count从图片数组取值即可，减少不必要的状态监听逻辑

修复后完整代码 #

import React, { useEffect, useState } from "react";
import bannerImg1 from "../../Assets/Images/bannerProduct1.png";
import bannerImg2 from "../../Assets/Images/bannerProduct2.png";
import { Row, Col, Container } from "react-bootstrap";
import { FaCaretRight } from "react-icons/fa";
import "./BannerSlider.css";

const BannerSlider = () => {
  const imageArray = [bannerImg1, bannerImg2];
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      // 函数式更新拿到最新的前值，避免闭包问题，取模实现循环轮播
      setCount(prev => (prev + 1) % imageArray.length);
    }, 3000);
    // 组件卸载时清除定时器
    return () => clearInterval(timer);
  }, [imageArray.length]);

  return (
    <div className="bannerSlider">
      <Container>
        <div className="slider-wrapper">
          <Row className="d-flex align-items-center">
            <Col lg={6} className="banner-image">
              {/* 直接通过count取对应图片，不需要额外状态维护 */}
              <img src={imageArray[count]} className="w-100 img-fluid" alt="" />
            </Col>
            <Col lg={6} className="banner-text">
              <h2>Where your imagination come true</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo
                porro neque odio, at aspernatur explicabo?
              </p>
              <button>
                Explore More <FaCaretRight className="banner-button-icon" />
              </button>
            </Col>
          </Row>
        </div>
      </Container>
    </div>
  );
};

export default BannerSlider;

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