在尝试实现响应式布局时,页面组件会重新呈现

问题描述 投票:0回答:1

我已经实现了一个使用react-router和Semantic UI React的应用程序。

this gist中可以找到一小段代码。

正如你所看到的,我试图模仿this approach(使用响应组件)以获得响应式布局(移动与非移动)

当我访问“/ people”路由时,People组件正常呈现,将生成API调用(fetchPeople)并将数据流入组件。

现在,如果我开始调整窗口大小并且匹配移动媒体查询,则会发生两件事:

  1. DesktopContainer不会渲染其子项
  2. MobileContainer将呈现其子级

这意味着People组件(它是DesktopContainer的子组件)将卸载,并且当呈现MobileContainer时,将呈现新的People组件,从而导致再次进行API调用等。看看here

作为解决此问题的方法,有人可能会建议解除People组件的状态并将其保存到App组件中。但是,我很确定在这个特定的用例中,People组件的状态应该是自包含的。

有没有关于如何解决这个问题的建议?

reactjs react-router react-router-dom semantic-ui-react
1个回答
0
投票

您正在卸载意味着清除旧状态的组件,而不是为两个组件创建重复状态,最好在主应用程序文件中创建一个状态并使用它。您可以这样做或使用redux创建全局存储。

© www.soinside.com 2019 - 2024. All rights reserved.