如何在 React.js 中保存滚动 position 并添加到 state？

Question

我有 MainWrapper，其中 api 请求，返回 object 和物品（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 项目。此外，每个项目旁边都有按钮指向该项目的详细信息页面。 我想在 go 到详细信息页面时保存滚动 position 并且当我回来时 position 在我单击的元素上。 在主页组件中，我创建了新的 state：

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没有更新 state ... e.preventDefault() - 仅用于测试。 我使用：

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

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

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);
}, [])