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

Question

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

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

如您所见，我正在尝试模仿 this approach（使用响应式组件）以获得响应式布局（移动与非移动）

当我访问 People 组件正常呈现的“/people”路由时，会进行 API 调用 (fetchPeople) 并且数据会流入组件。

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

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

这意味着 People 组件（它是 DesktopContainer 的子组件）将被卸载，并且随着 MobileContainer 的渲染，将渲染一个新的 People 组件，从而导致再次进行 API 调用等。看看@987654323 @

为了解决这个问题，有人可能会建议提升 People 组件的状态并将其保留在 App 组件中。但是，我很确定在这个特定的用例中，People 组件的状态应该是自包含的。

对于如何解决这个问题有什么建议吗？

Answer 1

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