Компонент страницы перерисовывается при попытке реализовать адаптивный макет

Question

Я реализовал приложение, использующее реагирующий маршрутизатор и Semantic UI React.

Небольшой фрагмент кода можно найти в этой сущности .

Как видите, я пытаюсь имитировать этот подход (с использованием компонента Responsive), чтобы адаптивный макет (мобильный или немобильный)

Когда я посещаю "/ people "направляет компонент People, который отображается как обычно, выполняется вызов API (fetchPeople), и данные поступают в компонент.

Теперь, если я начну изменять размер окна и сопоставим мобильный запрос, две вещипроизойдет:

1. DesktopContainer не будет отображать свои дочерние элементы
2. MobileContainer будет отображать свои дочерние элементы

Это означает, что компонент People (который былдочерний элемент DesktopContainer) будет размонтирован, и после рендеринга MobileContainer будет создан новый компонент People, что приведет к повторному вызову API и т. д. Посмотрите здесь

Какисправить это prвозможно, кто-то может предложить поднять компонент People и оставить его в компоненте App.Но я вполне уверен, что в данном конкретном случае этот компонент состояния «Люди» должен быть автономным.

Есть ли какие-либо предложения о том, как обойти эту проблему?

Answer 1

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