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

Question

我已经实现了一个使用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组件的状态应该是自包含的。

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

Answer 1

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