平滑滑块在reactjs中多次渲染幻灯片

import React, { useState, useEffect } from "react";
import Slider from "./Slider";

const SlideShow = ({ slides }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      handleNext();
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === slides.length - 1 ? 0 : prevIndex + 1
    );
  };

  return (
    <div className="slideshow">
      {slides.map((slide, index) => (
        <Slider
          key={index}
          content={slide.content}
          active={index === currentIndex}
        />
      ))}
    </div>
  );
};

export default SlideShow;

import React from "react";

const Slider = ({ content, active }) => {
  return (
    <div className={`slider ${active ? "active" : ""}`}>
      <img src={content} alt="slide" />
    </div>
  );
};

export default Slider;