在 React 中使用分页时滚动到顶部答案

【问题标题】：Scroll to top when using pagination in React在 React 中使用分页时滚动到顶部
【发布时间】：2022-08-24 22:43:31
【问题描述】：

我正在加载数据卡，当我按下分页按钮时，数据会发生变化，但屏幕仍然在同一个地方。按下按钮时如何滚动到顶部？该应用程序是一个 SPA，所以这可能是导致问题的原因？

const getCoinsData = async () => {
    try {
      const response = await Axios.get(
        `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=100&page=${activePage}&sparkline=true&price_change_percentage=1h%2C24h%2C7d`
      );
      setData(response.data);
      setLoading(false);
    } catch (e) {
      console.log(e);
    }
  };

标签： javascript reactjs

【解决方案1】：

由于该应用程序是 SPA，因此当您移至下一页时，该页面可能不会重新加载。您必须手动滚动到组件的顶部。

为此，请将 ref 添加到要滚动到顶部的内容的包装器中：

const wrapperRef = useRef(null);

// ... blablabla component stuff

return {
  <div ref={wrapperRef}></div>
}

然后只需确保您的下一页按钮处理程序可以访问参考：

const handleNextPageButtonClick = async () => {
  await getNextPage();
  wrapperRef.current.scrollIntoView();
}

【讨论】：

【解决方案2】：

另一种方法是使用组件中的 useEffect 获取页面更改的新数据

编辑应该已经更新了依赖项。我假设您的列表作为一个名为data 的变量进入。只需将其添加到依赖项数组中即可。您可以使用 data 对象或 isSuccess 布尔值（如果有的话）。

    useEffect(()=>{
        window.scrollTo({top: 0});
    },[data])

【讨论】：

不工作。可能是因为SPA
我未能在依赖数组中包含 data 对象（或您的列表对象的名称）
useEffect(() => { getCoinsData(); }, [activePage]);useEffect(() => { getCoinsData(); }, [activePage]);
我的 useEffect 已经依赖于在每个页面更改时重新加载，我应该添加一个昏迷并添加数据吗？
它确实取决于您的数据是如何设置的，但是是的。试一试，让我知道。我很想知道它是否有效

【解决方案3】：

使用 window.scrollTo({top: 0}) （由 epicmau5time 建议）对我有用，但是，我建议使用 useMemo 而不是 useEffect。我也在做一个 SPA，并使用分页。所以我使用了 useMemo 并将 currentPage 变量作为它的依赖项。

useMemo(() => {
    window.scrollTo({top: 0})
  }, [currentPage])

【讨论】：