如何使用 useEffect 中的 setInterval 来更新 state？

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

轮播数据.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);
    };
  }, []);