Метод вызывается со старыми реквизитами, когда размер компонента меняется через ResizeObserverJavascript

Форум по Javascript
Ответить
Anonymous
 Метод вызывается со старыми реквизитами, когда размер компонента меняется через ResizeObserver

Сообщение Anonymous »

У меня есть проблема со следующим компонентом.
Метод 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»