Компонент класса реагирования внутри обработчика реакции - DOM не обновляется

Question

У меня ниже состав:

const HookComponent = (props)=> {

    let [month, changeMonth] = useState(moment());


    return ( 
        <ChildComponent
            month={month}
            onChange={m => changeMonth(m)}
            minStep={5}
            prevMonthIcon="ion-ios-arrow-left"
            nextMonthIcon="ion-ios-arrow-right"
          />
    )
}

ChildComponent - это компонент класса, который обновляет месяц с помощью setState. Проблема с вышеупомянутым состоит в том, что изменение не отражается на DOM, но состояние в родительском компоненте изменяется (через пользовательскую кнопку ввода, которая изменяет состояние в ChildComponent). Я зарегистрировал это и подтвердил, что месяц в родителе изменяется. Является ли это некоторым ограничением реакции при использовании компонентов класса внутри ловушек?

Когда я конвертирую HookComponent в компонент класса и меняю месяц, используя setState, он работает как положено, и DOM изменяется при изменении ввода.

Answer 1

Кажется, что компонент InputMoment использует не month проп, а moment.

Кроме того, похоже, что InputMoment возвращает тот же экземпляр момента, который был передан как moment проп. Это приводит к тому, что при выполнении оператора changeMonth, поскольку ссылка не изменяется, элемент не отображается повторно.

Вы можете решить эту проблему, сохранив объект в состоянии. Когда вы вызываете changeMonth, вы передаете новый объект, и InputMoment затем корректно перерисовывается:

const HookComponent = (props)=> {
    let [month, changeMonth] = useState({ m: moment() });

    return ( 
        <ChildComponent
            moment={month.m}
            onChange={m => changeMonth({ m })}
            minStep={5}
            prevMonthIcon="ion-ios-arrow-left"
            nextMonthIcon="ion-ios-arrow-right"
          />
    )
}