Почему useState работает странно?

Question

[TheSnegok]

Есть слайдер с точками и стрелками, код:

<div className={s.slider}>
            <div className={s.slides} ref={slideRef}>
                {slides.map((item, index: number) => (
                    <Slide key={index} />
                ))}
            </div>
            <div className={s.slidesDots}>
                {dots.map((item: number, index: number) => <div key={index} className={dot === index ? s.DotActive : s.Dot}  onClick={() => changeSlide("dot", item, index)} />)}
            </div>
            <div className={s.arrowLeft} onClick={() => changeSlide("minus")}>
            </div>
            <div className={s.arrowRight} onClick={() => changeSlide("plus")}>
            </div>
        </div>

и функция которая вызывается при нажатиях:

let position: number = 0;
    const slideRef = useRef<HTMLHeadingElement | null>(null);
    const [dot, setDot] = useState<number>(0);

    const changeSlide = (option: string, item?: number, index?: number) => {
        if (slideRef && slideRef.current) {
            switch (option) {
                case "dot":
                    if (item !== undefined && index !== undefined) {
                        slideRef.current.style.left = `${position = item}%`;
                        setDot(index);
                    }
                    break;
                case "minus":
                    if (position === 0) {
                        slideRef.current.style.left = `${position = -400}%`;
                        // setDot(4);
                    } else {
                        slideRef.current.style.left = `${position += 100}%`;
                        // setDot(dot - 1);
                    }
                    break;
                case "plus":
                    if (position === -400) {
                        slideRef.current.style.left = `${position = 0}%`;
                        // setDot(0);
                    } else {
                        slideRef.current.style.left = `${position -= 100}%`;
                        setDot(dot + 1 );
                    }
                    break;
                default:
                    break;
            }
            console.log(position, dot);
        }
    }

useState работает странно, он точки при нажатии на стрелки переключает, а значения в нём прошлые, и ещё когда добавляю setDot в функцию то после первого нажатия на стрелку перестаёт работать пролистывание слайдов.

Comments

[Александр]

- setDot(dot + 1);
+ setDot(dot => dot + 1);

[TheSnegok]

Александр, Сделал, ничего не поменялось(

[Александр]

TheSnegok, const position = useRef(0); после используйте position.current.

[TheSnegok]

Александр, Благодарю, получается лучше для мутирующих значений использовать useRef??

[Александр]

TheSnegok, Просто Вы использовали состояние для точки но и меняете позицию через style, а значение позиции каждый раз удаляете. useRef не будет обновлять компонент никак.

Answer 1

[Alexandroppolus]

Не надо менять DOM вручную. Тебе не нужен slideRef и вся та содомия, в которой он участвует.
Сделай position как state, меняй благочестиво, а style.left указывай в зависимости от него:

<div className={s.slides} style={{left: position + '%'}}>

Comments

[TheSnegok]

Спасибо!!!!