Почему хук не срабатывает первый раз?

Question

[uzi_no_uzi]

Имеется такой код:

function MainPage() {


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

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


    useEffect(() => {
        setSlidesCount(slider.current.props.children.length);
        setLeftDragger(100 / slidesCount  / 2 + '%');
    });
    


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

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

            console.log(activeSlide, leftDragger)
    
        }
      };
}

Необходим для реализации навигации slick slider'a

let [slidesCount, setSlidesCount] = useState(0); //Устанавливаю количество слайдов
    let [leftDragger, setLeftDragger] = useState(0); //Устанавливаю позицию точки, которая будет перемещаться, для анимации
    let [activeSlide, setActiveSlide] = useState(0); //Устанавливаю активный слайд


    useEffect(() => {
        setSlidesCount(slider.current.props.children.length); //После того как компонент появился, устанавливаю значение слайдов
        setLeftDragger(100 / slidesCount  / 2 + '%'); // Устанавливаю позицию точки, которая будет свигаться влево в зависимости от того, какой сейчас слайд, делю 100% ширины полосы на которых расположены точки и делю на два, т.к. у первой точки расстояние от левого края равно половине расстояния между точками в середине (видно на скрине выше)
    });

//Этот коллбек срабатывает перед сменой слайда
beforeChange: (currentSlide, nextSlide) => {
            setActiveSlide(nextSlide); //Перед тем как прокрутится слайд, устанавливаю следующий за ним
            сoncole.log(nextSlide) // Выводит единицу и это верно, т.е. следующий слайд после нулевого - первый
           console.log(activeSlide) // Но активный слайд остается нулем, в этом и проблема, остальные вызовы setActiveSlide работают корректно и стэйт меняется на активный слайд, в чем может быть проблема?
            if(activeSlide == 0) {
                setLeftDragger(100 / slidesCount / 2 + "%");
            } else {
                setLeftDragger(100 / slidesCount * (activeSlide + 1))
            }

            console.log(activeSlide, leftDragger)
    
        }
      };

Comments

[alexalexes]

Разберитесь какую переменную activeSlide меняет setActiveSlide, а какую переменную берет beforeChange.
Не является ли activeSlide локальной переменной в setActiveSlide? Не поступает ли она внутрь функции через обертку замыкания? Нужно ли пользоваться переменной activeSlide или лучше запросить состояние объекта слайдера еще раз, чтобы узнать, какой слайд активный?