如何在 UseEffect 中只运行一个函数？答案

【问题标题】：How to run just one Function inside UseEffect?如何在 UseEffect 中只运行一个函数？
【发布时间】：2021-04-30 17:49:02
【问题描述】：

有谁知道如何解决这个代码。我有一个轮播，有上一个和下一个图标。单击后，我必须在 useEffect() 中运行特定函数。

我想运行 plusSlides() 函数，它只是计算新的主轮播图片。

代码是：

function Carousel({ children }) {

  useEffect(() => {

    var slideIndex = 1;

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");

      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
      }

      slides[slideIndex-1].style.display = "block";
    }


  });

  return (
    <CarouselStyled visible={visible}>

      <div className="slideshow-container">
        <div className="container">
          <Link href={`/${router.locale == "bs" ? "" : "en"}`}>
            <a className="mylogo">
              <img src="/logo.svg" alt="Doxat" />
            </a>
          </Link>
        </div>

        <div className="mySlides fade">
          <img src="/images/doxat-2.jpg" />
        </div>
        <div className="mySlides fade">
          <img src="/images/doxat-1.jpg" />
        </div>
        <div className="mySlides fade">
          <img src="/images/doxat-3.jpg" />
        </div>
        <a className="prev" onClick={() => plusSlides(-1)}>
            /* When clicked here, the plusSlides function has to be run*/
          <MdChevronLeft />
        </a>
        <a className="next">
          <MdChevronRight />
        </a>
      </div>
    </CarouselStyled>
  );
}

【问题讨论】：

你的意思是useEffect 被调用了两次而不是一次？
只需在useEffect 之外提取这些函数，然后从内部调用this.plusSlides（您必须使用函数）。此外，您还缺少依赖项，它作为 useEffect 的第二个参数传入，该函数仅在依赖项更新后调用。
useEffect 是在重新渲染时执行一些代码。你不应该用它来定义可重用的函数，它们应该在你的组件 Body 中定义
document.getElementsByClassName("mySlides") 真的不是这样做的反应方式...使用 JSX 中的表达式来隐藏和显示...

标签： javascript reactjs react-hooks

【解决方案1】：

你的函数需要在useEffect()外面定义，然后因为你使用函数组件，调用plusSlides就可以工作

function Carousel({ children }) {

   const plusSlides = ()=>{
      // do somthing
   }

   useEffect(()=>{

   },[])

   return(
      <div>
          <a className="prev" onClick={() => plusSlides(-1)}></a>
      </div>
   )
}

【讨论】：