单击浏览器后退按钮时，React 显示相同的项目列表

Question

我有 2 个反应组件。第一个组件是项目列表。第二个组件是代表项目的组件。

第一个组件在生命周期方法中从服务器获取数据componentDidMount。当您第一次到达此页面时，会显示 20 项。该页面还有一个“显示更多”按钮。当用户单击该按钮时，会获取另外 20 条数据。

让我们承认用户单击了该按钮。现在显示 40 个项目。

用户可以单击某个项目，然后重定向到包含该项目详细信息的另一个页面。

我的问题是，当用户单击后退浏览器按钮（返回到项目列表）时，组件会重新渲染并仅显示 20 个项目。先前的状态（包含 40 项）将丢失。

我想要的是，如果当前状态有 40 个项目，并且用户单击其中之一（以查看详细信息页面），当他返回（通过浏览器导航）时，始终在他离开之前向他显示相同的列表到详情页面。

换句话说，从详情页面导航到列表页面，不得重新渲染列表页面。

我希望我的解释足够清楚。

谢谢。

Answer 1

问题是，当您访问第二个组件时，第一个组件已被卸载。您有多种选择： - 使用像 Redux 这样的存储来保留数据 - 呈现第二个组件而不卸载前一个组件（IE：模态） - 将组件状态存储在上部状态（提升状态，解决 90% 的反应模式问题） -将结果存储在本地存储中 - 将加载的项目数存储在某处，以防止显示过时的数据

您打算实现它的方式实际上取决于数据持久性/用户体验接受标准，但您有很多选择。