javascript - 如何在 React.js 中保存滚动位置并添加到状态？

Question

我有 MainWrapper，其中 api 请求返回带有项目(20 件)的对象。数据 api 响应我传输到组件(路由中的主页)。 MainWrapper中有两个路由:主页和详情页。

<Switch>
  <Route
    exact
    path="/"
    render={(props) => (
      <PokemonCardContainer
        pokemons={pokemons}
        search={search}
        loading={loading}
        error={error}
        lastPokemonElementRef={lastPokemonElementRef}
        handleSearch={handleSearch}
      />
    )}
  />
  <Route exact path="/pokemon/:pokemonName" component={Pokemon} />
</Switch>

在主页中，我用项目构建列表。当我到达列表末尾时，API 请求已更新，并在列表中添加新的 20psc 项目等。此外，每个项目旁边都有一个按钮，可通往该项目的详细信息页面。 我想在转到详细信息页面时保存滚动位置，并且当我返回时，该位置位于我单击的元素上。在主页组件中我创建新状态:

const [scrollPosition, setScrollPosition] = useState([0, 0]);

接下来我创建了一个点击处理程序，我可以在其中找到滚动的坐标:

const getCurrentScrollPosition = (e) => {
    e.preventDefault();
    let cordsAfterClick = [];
    let cords = ["scrollX", "scrollY"];
    cords.forEach((cord) => {
      cordsAfterClick.push(window[cord]);
    });
    console.log("Array with cords: ", cordsAfterClick);
    setScrollPosition(cordsAfterClick);
    console.log("State scrollPosition after update state: ", scrollPosition);
  };

ps:我看到 setScrollPosition 没有更新状态...e.preventDefault() - 仅用于测试。我使用:

useEffect(() => {
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
  }, [scrollPosition]);

UPD:代码已更新。下面的评论有助于理解这个问题。状态:

const [scrollPosition, setScrollPosition] = useState({
    scrollX: 0,
    scrollY: 0,
  });

点击处理程序:

const getCurrentScrollPosition = (e) => {
    let cordsAfterClick = {};
    let cords = ["scrollX", "scrollY"];
    cords.forEach((cord) => {
      cordsAfterClick[cord] = window[cord];
    });
    localStorage.setItem("scrollCord", JSON.stringify(cordsAfterClick));
  };

使用效果:

useEffect(() => {
    setScrollPosition((prevScrollCord) => {
      return {
        ...prevScrollCord,
        ...JSON.parse(window.localStorage.getItem("scrollCord")),
      };
    });
    window.scrollTo(scrollPosition.scrollX, scrollPosition.scrollY);
  }, [scrollPosition.scrollX, scrollPosition.scrollY]);

Answer 1

您必须像这样监听 useEffect 内的滚动事件:

useEffetch(() => {
  const handleScroll = e => {
   // set scroll values in state
  }

  window.addEventListener('scroll', handleScroll);

  // Remove listener when component unmounts
  window.removeEventListener('scroll', handleScroll);
}, [])