1

Criei em meu projeto um componente "Slide show" que possui a função abaixo para efetuar o slide automático. Porém, ao ir para outra página usando a função push do useHistory history.push('/about');, porem ao fazer isso, e voltar para a tela inicial que possui o "Slide Show", essa função do useEffect acaba sendo executada novamente, travando o slide.

Como posso resolver isso?

useEffect(() => {
    var slides = document.querySelectorAll(".baner");
    var imagens = document.querySelectorAll(".bc_img img");
    var btns = document.querySelectorAll(".dots");

    function repeat() {
      let active = document.getElementsByClassName("active");
      let i = 1;
      var repeater = () => {
        console.log(i);
        setTimeout(function () {
          [...active].forEach((activeSlide) => {
            activeSlide.classList.remove("active");
          });

          slides[i].classList.add("active");
          btns[i].classList.add("active");
          imagens[i].classList.add("active");
          i++;

          if (slides.length === i) {
            i = 0;
          }
          if (i >= slides.length) {
            return;
          }
          repeater();
        }, 5000);
      };
      repeater();
    }
    repeat();
  }, []);

1 Resposta 1

1

O useEffect pode ser desconsiderado se você retornar false. Você pode incluir uma checagem no início do useEffect:

useEffect(() => {
  if(codicao) return false
}, [])

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .