如何在 useEffect 中使用 setInterval 来更新状态？

Question

我对 javascript 还很陌生，而且我以前从未使用过 setInterval()。我正在尝试制作自动幻灯片放映。目前，我的幻灯片将运行一次然后停止。如何让它持续运行？我非常感谢任何有关如何使其发挥作用的帮助或建议。谢谢！

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])

完整代码

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;

Answer 1

有两件事要改变：

Carousel.length 应该是CarouselData.length，因为Carousel 是组件本身。

useEffect 不应将slideIndex 作为依赖项，因为这会在每次slideIndex 更改时创建一个新间隔。并且可以清除组件卸载的时间间隔。

  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);
    };
  }, []);

---

编辑

slideIndex 最初是 0。如果要将slideIndex 保持从零开始，则必须进行以下更改：

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>
    )
}