Question

我是使用 ReactJS/NextJS 的初学者。我正在创建一个轮播组件以使用 NextJS 框架中的图像优化功能。轮播组件工作正常，我想在传递持续时间的道具时自动添加轮播下一张幻灯片。我试图在带有 [me@login-node:/data/homevols/me] $less ~/.ssh/config Host * IdentityFile ~/.ssh/id_rsa /data/homevols/me/.ssh/config (END) 的 UseEffect 钩子中创建一个函数来执行我的下一张幻灯片。

我试过这个代码：

setTimeout

但这给了我 import React, { useState, useEffect } from 'react'; import styles from 'components/shared/carousel/carouselStyles.css'; import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; import NavigateNextIcon from '@material-ui/icons/NavigateNext'; import Image from 'next/image'; const Carousel = (props) => { const { slides, slideshow } = props; const [current, setCurrent] = useState(0); const length = slides && slides.length; const nextSlide = () => { setCurrent(current === length - 1 ? 0 : current + 1); }; const prevSlide = () => { setCurrent(current === 0 ? length - 1 : current - 1); }; if (!Array.isArray(slides) || slides.length <= 0) { return null; } useEffect(() => { if (slideshow > 0) { let interval = setInterval(() => { nextSlide(); }, slideshow); return () => clearInterval(interval); } }, [current, slideshow]); return ( <section className="slider"> <NavigateBeforeIcon className="left-arrow" onClick={prevSlide} /> <NavigateNextIcon className="right-arrow" onClick={nextSlide} /> {slides.map((slide, index) => { return ( <> <div className={index === current ? 'slide active' : 'slide'} key={index} > {index === current && ( <Image src={slide.feature_image} alt="carousel_img" className="image" width={1600} height={600} /> )} </div> </> ); })} <div className="dots-con"> {slides.map((slide, index) => { return ( <span className={index === current ? 'dot active' : 'dot'} key={index} ></span> ); })} </div> </section> ); }; export default Carousel;

的错误

如果我要评论 Error: Rendered more hooks than during the previous render，那么它工作正常，但没有想出我想要的自动播放轮播

Answer 1

像这样在钩子后移动你的条件：

  useEffect(() => {
    if (slideshow > 0) {
      let interval = setInterval(() => {
        nextSlide();
      }, slideshow);
      return () => clearInterval(interval);
    }
  }, [current, slideshow]);


 if (!Array.isArray(slides) || slides.length <= 0) {
        return null;
 }

在此处阅读有关 React 钩子规则的更多信息 link

Answer 2

这是你的 useEffect Hook 中的语法问题。

您不应将书面语句包装在 if 条件中。它从不执行 useEffect 的返回来清理。

useEffect(() => {
    let interval;
    if (slideshow > 0) {
      interval = setInterval(() => {
        nextSlide();
      }, slideshow);
    }
    return () => {
      clearInterval(interval);
    };
  }, [current, slideshow]);

React/NextJS 使用 UseEffect 错误：渲染的钩子比上一次渲染时更多

2 个答案: