恢复反应项目中的滚动位置（钩子）

Question

我搜索了一些有关我的问题的答案，但发现了一个相关的答案。不幸的是，它甚至在类组件上，所以我想在导航回功能组件后恢复滚动位置。在这里我将分享 Stackblitz 上的源代码链接

Answer 1

这里有几个问题。

第一：

setPosts(res.data.slice(0, 20), handleScrollPosition());

你看，useState 中的 setter 没有 this.setState() 那样有第二个参数。但是，您能问一下，为什么您的 handleScrollPosition 会被调用吗？（因为您可以看到它在调试器中被调用）。原因是您已将其编写为 handleScrollPosition()，因此会立即调用它。为了证明我的观点，如果您将其更改为正确的“传递回调”形式：

setPosts(res.data.slice(0, 20), handleScrollPosition);

正如您在基于类的版本中已经拥有的那样，您将看到它从未被调用。同样，

[].map(() => {}, 1,2,3,4, handleScrollPosition())

即使显然 [].map() 不处理第 6 个参数，也会调用 handleScrollPosition() 。

那么你应该做什么？首先，让我们将滚动恢复移动到单独的 useEffect 中：

useEffect(() => {
    const scrollPosition = sessionStorage.getItem("scrollPosition");
    if (scrollPosition) {
      window.scrollTo(0, parseInt(scrollPosition));
      sessionStorage.removeItem("scrollPosition");
    }
}, []);

显然它效果不佳，因为它将在获取数据之前立即调用。因此，让我们添加对 posts 的依赖：

useEffect(() => {...
}, [posts]);

但它仍然无法正常工作。原因是它在 posts 为空时在初始渲染时触发...所以让我们添加检查“仅在加载帖子后”：

useEffect(() => {
  if (posts.length) {
    const scrollPosition = sessionStorage.getItem("scrollPosition");
    if (scrollPosition) {
      window.scrollTo(0, parseInt(scrollPosition));
      sessionStorage.removeItem("scrollPosition");
    }
  }
}, [posts]);

现在它按预期工作并恢复滚动位置。

PS 顺便说一句，我不认为将位置写入 sessionStorage 是最好的方法。使用多个选项卡会造成混乱。如果没有示例代码，我会通过创建单独的路线“也是列表，但带有我们应该滚动到的元素的 ID”来看到替代方案。然后链接“返回列表”将定位该路线，并传递您当前正在查看详细信息的实体 ID。