@uzi_no_uzi

Почему хук вызывается 2 раза?

function MainPage() {


    let slider = React.createRef();
    let slideSpeed = 500;

    let [slidesCount, setSlidesCount] = useState(0);
    let [leftDragger, setLeftDragger] = useState(0);
    let [activeSlide, setActiveSlide] = useState(0);

   //Хук вызывается 2 раза
    useEffect(() => {
        setSlidesCount(document.querySelectorAll('.slick-list .slick-slide:not(.slick-cloned)').length)
        console.log(slidesCount) //Сначала выводит 0, потом 4
        
    }, [slidesCount]);
    


    let settings = {
        dots: false,
        infinite: true,
        speed: slideSpeed,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        beforeChange: (currentSlide, nextSlide) => {
            setActiveSlide(nextSlide);
            console.log(leftDragger);

            if(activeSlide == 0) {
                setLeftDragger(100 / slidesCount * (activeSlide + 1) / 2 + "%");
            } else {
                setLeftDragger(20)
            }

    
        }
      };

    return(
        <div className="main-page">
            <section className="about">
               <Slider ref={slider} {...settings}>
               </Slider>
               <SliderNav slideSpeed={slideSpeed} sliderDOM={slider} />
            </section>
            <section className="remembers">
                
            </section>
        </div>
    )
    
}

export default MainPage;


Имеется такой код, useEffect вызывается 2 раза, сначала выводит 0 элементов (хотя их 4), а второй раз уже 4, почему так происходит и как это исправить?

5eaffc0447b00468447595.png
  • Вопрос задан
  • 385 просмотров
Решения вопроса 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
потому что вы инициализируете его с 0
let [slidesCount, setSlidesCount] = useState(0);
потом вы подписываетесь на slidesCount и вызывается хук с 0
useEffect(() => {
        setSlidesCount(document.querySelectorAll('.slick-list .slick-slide:not(.slick-cloned)').length)
        console.log(slidesCount) //Сначала выводит 0, потом 4
        
    }, [slidesCount]);

а потом вы меняете значение setSlidesCount(document.querySelectorAll('.slick-list .slick-slide:not(.slick-cloned)').length) и по это хук опять вызывается уже с 4
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы