Порядок срабатывания хука useEffect при клике и CSS ,

Question

useEffect(() => {
    setScale(zoom ? 1 : 0.33)
    zoom ? containerRef.current?.scrollTo(1430, 1820) : containerRef.current?.scrollTo(0, 0)
}, [zoom])

//translate(${zoom ? mapPosition.x : 0}px, ${zoom ? mapPosition.y : 0}px)

return (
    <>
        <div className={s.zoomBlock}>
            <div className={cn(s.zoomBtn, {[s.disabled]: zoom})} onClick={() => setZoom(true)}>
                <Plus />
            </div>
            <div className={cn(s.zoomBtn, {[s.disabled]: !zoom})} onClick={() => setZoom(false)}>
                <Minus />
            </div>
        </div>
        <div ref={containerRef} className={s.root} style={{overflow: zoom ? 'scroll' : 'hidden'}}>
            <div
                className={s.mapWrapper}
                style={{transform: `scale(${scale})`}}>

У меня есть большое изображение которое должно масштабироваться в определенное место, для этого я использую scrollTo и scale, все работает но не в том порядке, при клике сначала происходит scrollTo а потом scale хотя useEffect после рендеринга должен срабатывать что нужно исправить?

Answer 1

Попробуй так.

const [scale, setScale] = useState<number>(1);
const [zoom, setZoom] = useState<boolean>(false);

useEffect(() => {
    setScale(zoom ? 1 : 0.33);
}, [zoom]);

useLayoutEffect(() => {
  if (scale && containerRef.current) {
    if (zoom) {
      containerRef.current?.scrollTo(1430, 1820);
    }
    else {
      containerRef.current?.scrollTo(0, 0)
    }
  }
}, [scale]);

БЛОГ НА HUSL

Порядок срабатывания хука useEffect при клике и CSS ,

Ответы (1 шт):