У меня есть проблема со следующим компонентом.
Метод onupdatescale должен вызывать при изменении props.zoomvalue , но значение не является самым самым недавний и вместо этого тот, который от первого рендера.
ex. Компонент создается с помощью ZoomValue 1.0 , затем значение изменяется на 1,5 , но внутри onupdatescale все еще 1,5 .
i Отладило это с помощью консоли, и я понимаю, что функция вызывается с новым значением, но затем происходит еще один вызов после старого значения. Как это возможно? Созданный функция получает звонок. Для меня функция обновления создается правильно, чего не хватает? -none PrettyPrint-Override ">import { useLayoutEffect, useRef, useState } from "preact/hooks";
import type { JSX } from "preact/jsx-runtime";
export interface WidgetFormContainerProps
{
vWidth: string | number,
zoomValue: number,
children?: any,
}
export const WidgetFormContainer = (props: WidgetFormContainerProps): JSX.Element =>
{
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const [scale, setScale] = useState(1.0);
const root = useRef(null);
const container = useRef(null);
const onUpdateScale = (): void =>
{
if (!root.current || !container.current)
{
// won't update with no elements.
return;
}
const newScale = (root.current.clientWidth / container.current.clientWidth) * props.zoomValue;
const newWidth = Math.max(container.current.clientWidth * newScale, root.current.clientWidth);
const newHeight = container.current.clientHeight * newScale;
setScale(newScale);
setWidth(newWidth);
setHeight(newHeight);
}
useLayoutEffect(() =>
{
if (!root.current)
{
// required root element to create observer, destroy previous observer if any.
return;
}
const observer = new ResizeObserver(onUpdateScale);
observer.observe(root.current);
onUpdateScale();
return () => observer.disconnect();
}, [root.current]);
useLayoutEffect(onUpdateScale, [props.zoomValue]);
return (
);
}
Подробнее здесь: https://stackoverflow.com/questions/794 ... zeobserver
Метод вызывается со старыми реквизитами, когда размер компонента меняется через ResizeObserver ⇐ Javascript
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Хорошая замена ResizeObserver при определении размера div и вызове функции, которая
Anonymous » » в форуме CSS - 0 Ответы
- 29 Просмотры
-
Последнее сообщение Anonymous
-
-
-
ResizeObserver Loop завершен с недосталенными уведомлениями в сценарии Vue JS
Anonymous » » в форуме Javascript - 0 Ответы
- 12 Просмотры
-
Последнее сообщение Anonymous
-