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

Question

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

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

如您所见，我正在尝试模仿this approach（使用自适应组件），以便具有自适应布局（移动与非移动）

当我访问People组件正常渲染的“ / people”路线时，会进行API调用（fetchPeople），数据会流入该组件。

现在，如果我开始调整窗口大小并匹配移动媒体查询，将发生两件事：

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

这意味着将卸载People组件（它是DesktopContainer的子级），并且在呈现MobileContainer时，将呈现一个新的People组件，从而导致再次进行API调用，依此类推。看一下{{ 3}}

为解决此问题，有人可能建议提高People组件的状态并将其保留在App组件中。但是，我很确定在这种特殊的用例中，People组件的状态应该是独立的。

关于如何解决此问题，是否有任何建议？

Answer 1

您正在卸载组件，这意味着清空旧状态，而不是为两个组件都创建重复状态，最好在Main App文件中创建一个状态并使用它。您可以执行此操作，也可以使用redux创建一个状态。全球商店。