Riveran
@Riveran
Astartes

Как обновить react компонент после изменения в объекте?

Добрый день, не могу понять как обновить react компонент после изменения одного из свойств объекта
factorModel

export default function SensorFactorEditComponent ({ factor, id, fullWidth, showMessage }) {
    const factorModel = new FactorModel();
    const [isChanged, setIsChanged] = useState(false);

    useEffect(() => {
        factorModel.on('change:factor', () => {
            //Обновляю состояние компонента после изменения свойства объекта что бы компонент обновился
            setIsChanged(!isChanged);
        })
    });

    const updatedFactor = () => {
        //После изменения состояния компонент обновляется но всё время выдаёт старое значение
        return <div>{factorModel.getFactor()}</div>;
    }

    return (
    <>
                <Form model={factorModel}>
                    <Input
                        type='number'
                        name='factor'
                        value={factorModel.getFactor()}
                        fullWidth={fullWidth}
                    />
                </Form>
                {updatedFactor()}
    </>
    );
}


Возможно кто то сталкивался с такой ситуацией и знает как исправить?
  • Вопрос задан
  • 695 просмотров
Пригласить эксперта
Ответы на вопрос 1
@twolegs
Во-первых, у вас каждый рендер будет создаваться новый экземпляр объекта FactorModel(). Т.е. каждую итерацию рендера у вас заново инициализированный объект.
Чтобы этого избежать, надо либо мемоизировать этот инстанс (хук useMemo), либо инстанцировать объект вне компонента (если это возможно).
Во-вторых, эффект также вызывается каждый рендер, и на событие каждый раз подписывается новая функция (память течет). Чтобы этого избежать, нужно указать второй параметр в useEffect: useEffect(..., []) - такой эффект выполнится только при монтировании компонента.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы