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

【问题标题】：React/NextJS using UseEffect Error: Rendered more hooks than during the previous renderReact/NextJS 使用 UseEffect 错误：渲染的钩子比上一次渲染期间更多
【发布时间】：2021-09-29 09:01:54
【问题描述】：

我是使用 ReactJS/NextJS 的初学者。我正在创建一个轮播组件以使用 NextJS 框架中的图像优化功能。轮播组件工作正常，我想在传递持续时间的道具时自动添加轮播下一张幻灯片。我试图用setTimeout 在UseEffect 钩子中创建一个函数来执行我的下一张幻灯片。

我试过这段代码：

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的错误

如果我要评论useEffect，那么它工作正常，但没有想出我想要的自动播放轮播

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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

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

【讨论】：

分享代码沙箱链接了解更多详情

【解决方案2】：

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

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


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

在这里阅读更多关于反应钩子规则link

【讨论】：