How to use setInterval inside useEffect to update the state?-CodePudding

I'm pretty new to javascript, and I have never used setInterval() before. I am trying to make an automatic slide show. Currently, my slideshow will run once and then stop. How do I get it to continually run? I would really appreciate any help or advice on how to get this to work. Thank you!

Code specific to setInterval()

const [slideIndex, setSlideIndex] = useState(0)
const timeout =  React.useRef(null);

useEffect(() => {
  const nextSlide = () => {
    setSlideIndex(current => (current === Carousel.length - 1 ? 0 : current   1))
  }
  timeout.current  = setInterval(nextSlide, 3000)

}, [slideIndex])

Full Code

import React, {useState, useEffect} from 'react'
import './Slider.css'
import BtnSlider from './BtnSlider'
import CarouselData from './CarouselData'


export default function Carousel() {

      
const [slideIndex, setSlideIndex] = useState(0)
const timeout =  React.useRef(null);

useEffect(() => {
  const nextSlide = () => {
    setSlideIndex(current => (current === Carousel.length - 1 ? 0 : current   1))
  }
  timeout.current  = setInterval(nextSlide, 3000)

}, [slideIndex])
      
    
   
    const nextSlide = () => {
        if(slideIndex !== CarouselData.length){
            setSlideIndex(slideIndex   1)
        } 
        else if (slideIndex === CarouselData.length){
            setSlideIndex(1)
        }
    }

    const prevSlide = () => {
        if(slideIndex !== 1){
            setSlideIndex(slideIndex - 1)
        }
        else if (slideIndex === 1){
            setSlideIndex(CarouselData.length)
        }
    }

    const moveDot = index => {
        setSlideIndex(index)
    }

    

    return (
        <div className="container-slider">
            {CarouselData.map((obj, index) => {
                return (
                    <div
                    key={obj.id}
                    className={slideIndex === index   1 ? "slide active-anim" : "slide"}
                    >
                        <img 
                        src={process.env.PUBLIC_URL   `/Imgs/img${index   1}.jpg`} 
                        alt="images"/>
                    </div>
                )
            })}
            <BtnSlider moveSlide={nextSlide} direction={"next"} />
            <BtnSlider moveSlide={prevSlide} direction={"prev"}/>

            <div className="container-dots">
                {Array.from({length: 3}).map((item, index) => (
                    <div 
                    onClick={() => moveDot(index   1)}
                    className={slideIndex === index   1 ? "dot active" : "dot"}
                    ></div>
                ))}
            </div>
        </div>
    )
}

CarouselData.js

import { v4 as uuidv4 } from "uuid";

const CarouselData = [
  {
    id: uuidv4(),
    title: "Lorem ipsum",
    subTitle: "Lorem"
  },
  {
    id: uuidv4(),
    title: "Lorem ipsum",
    subTitle: "Lorem"
  },
  {
    id: uuidv4(),
    title: "Lorem ipsum",
    subTitle: "Lorem"
  },
];

export default CarouselData;

CodePudding user response：

Two things to change:

Carousel.length should be CarouselData.length because Carousel is the component itself.

The useEffect should not have slideIndex as a dependency as that would create a new interval every time slideIndex changes. And you can clear the interval when the component unmounts.

  const [slideIndex, setSlideIndex] = useState(0);

  useEffect(() => {
    const nextSlide = () => {
      setSlideIndex((current) =>
        current === CarouselData.length - 1 ? 0 : current   1
      );
    };
    const interval = setInterval(nextSlide, 3000);

    return () => {
      clearInterval(interval);
    };
  }, []);

Edit

slideIndex is initially 0. If you want to maintain slideIndex as zero-based, you have to make the following changes:

export default function Carousel() {
    const [slideIndex, setSlideIndex] = useState(0)

    useEffect(() => {
        const nextSlide = () => {
            setSlideIndex((current) =>
                current === CarouselData.length - 1 ? 0 : current   1
            );
        };
        const interval = setInterval(nextSlide, 3000);

        return () => {
            clearInterval(interval);
        };
    }, []);



    const nextSlide = () => {
        setSlideIndex(index => (index === CarouselData.length - 1) ? 0 : index   1)
    }

    const prevSlide = () => {
        setSlideIndex(index => (index === 0) ? CarouselData.length - 1 : index - 1)
    }

    const moveDot = index => {
        setSlideIndex(index)
    }



    return (
        <div className="container-slider">
            {CarouselData.map((obj, index) => {
                return (
                    <div
                        key={obj.id}
                        className={slideIndex === index ? "slide active-anim" : "slide"}
                    >
                        <img
                            src={process.env.PUBLIC_URL   `/Imgs/img${index   1}.jpg`} // change this to just `index` if your images start with 0 (img0.jpg) 
                            alt="images" />
                    </div>
                )
            })}
            <BtnSlider moveSlide={nextSlide} direction={"next"} />
            <BtnSlider moveSlide={prevSlide} direction={"prev"} />

            <div className="container-dots">
                {Array.from({ length: CarouselData.length }).map((item, index) => (
                    <div
                        onClick={() => moveDot(index)}
                        className={slideIndex === index ? "dot active" : "dot"}
                    ></div>
                ))}
            </div>
        </div>
    )
}