如何在 UseEffect 中只運行一個 Function？

Question

有誰知道如何解決這個代碼。 我有一個輪播，有上一個和下一個圖標。 單擊后，我必須在 useEffect() 中運行特定的 function。

我想運行 plusSlides() function，它只是計算新的主輪播圖片。

代碼是：

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

Answer 1

您的 function 需要在 useEffect() 外部定義，然后因為您使用 function 組件，只需調用 plusSlides 即可

function Carousel({ children }) {

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

   useEffect(()=>{

   },[])

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