Метод вызывается со старыми реквизитами, когда размер компонента меняется через 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»