У меня есть проблема со следующим компонентом.
Метод 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
Форум по Javascript
1739520930
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 (
);
}
Подробнее здесь: [url]https://stackoverflow.com/questions/79438727/method-called-with-old-props-when-component-size-changes-via-resizeobserver[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия