如何保留单击“加载更多”按钮时加载的项目

Question

我是 React 新手。

我有一个产品列表，默认情况下显示 15 个产品。当我单击“加载更多”按钮时，它会显示另外 15 个项目，总共 30 个项目。但是，当我单击“加载更多”按钮后显示的项目，然后导航到产品详细信息页面时，返回到列表页面后，它会在页面上显示一个随机点，因为加载的产品现已消失。如何保留点击按钮后加载的商品，以便当我从商品详情页面返回时，可以回到点击商品显示的位置？

Answer 1

你获取的数据没有出现的原因是因为负责获取数据的组件渲染时，它最初将“page”值设置为1，如下所示：

const [page, setPage] = useState(1)

如果你想记住当前页面，你需要存储它，例如存储在 localStorage 或 sessionStorage 中。然后，每当该页面加载时，您就可以检索存储的页数。

您可以使用 useHooks 库中的 useLocalStorage 挂钩来实现此目的。该挂钩允许您模拟上述行为，而不会遇到任何问题。您可以在此处的文档中找到更多信息： useLocalStoage 文档