Реактивный дочерний компонент теряет анимацию при повторном рендеринге

Question

У меня есть приложение React, использующее пользовательский интерфейс материалов с компонентом (который мы можем назвать DatePicker), показанным ниже, хитро измененным для демонстрационных целей.

Материал интерфейса анимирует клики и другие взаимодействия с его компонентами. При щелчке переключателя, который уже был выбран, или «кнопки времени», которая не меняет состояние, эта анимация отображается выше. Однако, когда такой щелчок меняет состояние, анимация прерывается.

Я понимаю, почему это происходит с технической точки зрения; DatePicker компонент вызывает setMinutes, которое является свойством, переданным от его родителя (где живет состояние). Это переменная React.useState, которая затем обновляет свою соответствующую переменную minutes. Минуты затем передаются в DatePicker, который перерисовывается из-за смены реквизита.

Если состояние находилось в пределах DatePicker, тогда эта проблема не должна поднимать голову; однако DatePicker является частью гораздо большей формы, которая определяет содержимое таблицы в родительском элементе. Чтобы сгенерировать строки для этой таблицы, родитель должен иметь эту информацию.

Ниже приведен пример реконструкции родителя:

const Parent = () => {
    const [minutes, setMinutes] = React.useState(15);
    const [radioOption, setRadioOption] = React.useState('Thank You');
    // Many other state variables here to hold other filter information

    return (<div>
        <DatePicker minutes={minutes} setMinutes={setMinutes} radioOption={radioOption} setRadioOption={setRadioOption}/>
    </div>);
};

А вот пример реконструкции DatePicker:

const DatePicker: React.FC<DatePickerProps> = props => {
    const {minutes, setMinutes, radioOption, setRadioOption} = props;
    return (<div>
        <Radios value={radioOption} onChange={val => setRadioOption(val)}/>
        <Minutes value={minutes} onChange{val => setMinutes(val)}/>
    </div>);
};

Я не уверен, как лучше всего поступать в этой ситуации, но у меня возникает отчетливое ощущение, что это не так. У кого-нибудь есть совет? Заранее спасибо!

Answer 1

Спасибо за ваш комментарий, Райан Когсвелл. Я создал изолированную программную среду кода и обнаружил, что проблема не в управлении состоянием React, а в том, что я делал за пределами , что я указал в своем вопросе.

Я использовал withStyles HO C, чтобы обернуть мой компонент, аналогично const StyledDatePicker = withStyles(styles)(DatePicker). Затем я использовал этот стилизованный элемент и наложил на него свойства (minutes, et c).

Оказывается, что использование стиля 1011 * решает эту проблему. Я решил эту проблему дальше и обнаружил, что создал компонент «Стиль» в методе «рендеринга» родительского элемента, то есть каждый раз, когда изменение в цепочке выталкивалось вверх по цепочке, родительский элемент рендерится заново, и весь «Стилизованный» будет тип компонента будет создан снова (или я так верю). Это нарушит целостность ссылок, что объясняет поведение «перетаскивания и повторного создания».

Это дает ценный урок - держать компоненты небольшими и использовать песочницы для устранения неполадок. Еще раз спасибо!

Для всех, кто заинтересован, вот Кодовая песочница , используемая для тестирования.