在Vite构建的NextJS中实现Logo自动轮播组件的问题

你在基于Vite的Next.js项目中制作自动Logo轮播组件时，原代码存在几个关键问题导致失效：

• 用普通let index管理当前图片索引，组件重渲染时会被重置，无法维持状态
• useRef使用错误，既没有正确绑定到目标元素，也不该试图通过ref直接修改图片源
• window.onload不适合React组件生命周期，且未处理定时器的清理逻辑，会导致内存泄漏
• Next.js的Image组件需要直接传入资源引用，而非ref对象

以下是修正后的完整代码：

import React, { useState, useEffect } from 'react'
import Image from 'next/image'
import Logo1 from '../public/Assets/random1.png'
import Logo2 from '../public/Assets/random2.png'
import Logo3 from '../public/Assets/random3.png'

const LogoCarousel = () => {
  const images = [Logo1, Logo2, Logo3];
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    // 设置定时器，每3秒切换图片
    const intervalId = setInterval(() => {
      setCurrentIndex(prevIndex => (prevIndex + 1) % images.length);
    }, 3000);

    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(intervalId);
  }, [images.length]);

  return (
    <div className='logo-carousel'>
      <div className="logo-slot1">
        <Image 
          src={images[currentIndex]} 
          width={50} 
          height={50} 
          alt="轮播Logo"
        />
      </div>
    </div>
  )
}

export default LogoCarousel

核心修正说明 #

• 用useState管理当前图片索引，确保组件重渲染时状态不会丢失
• 用useEffect替代window.onload，遵循React生命周期规范，同时在组件卸载时清理定时器，避免内存泄漏
• 通过currentIndex状态直接控制Image组件的src属性，符合Next.js组件的使用要求
• 用(prevIndex + 1) % images.length实现循环切换，无需手动判断索引边界，后续新增图片无需修改切换逻辑

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