Почему неверно устанавливается позиция скролла (React.js)?

Question

[Константин П]

Подскажите пожалуйста. Есть два компонента(они же две странице в роуте, главная страница со списком элементов и страница подробного описания). при прокрутке элементы подгружаются по 20шт. Хочу сделать, чтобы при переходе на страницу с подробным описанием элемента списка, сохранять позицию скролла. Чтобы при возвращении назад, мы были рядом с тем элементом по которому кликнули. Сделал стейт:

const [scrollPosition, setScrollPosition] = useState({
    scrollX: 0,
    scrollY: 0,
  });
  console.log("State scrollPosition: ", scrollPosition);

Сделал обработчик клика:

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

Так же сохраняю данные в локальное хранилище по клику. Далее в useEffect я обновляю стейт и устанавливаю позицию скролла:

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

Но вот проблема в том, что позиция window.scroll() не совпадает. Приведу скрины:



В чем моя ошибка, подскажите пожалуйста.
ps: И может вообще есть решение лучше? а то чувствую, что наворотил делов))

Answer 1

[McBernar]

Думаю, не все элементы успели отрендериться, а скролл уже поехал. Поставьте задержку полсекунды для скроллту и проверьте — если приедет в нужное место, то я прав.

Comments

[Константин П]

Вы гений)... сработало. приехало в нужный элемент.
...сижу и думаю, почему я не догадался поставить тайм-аут и посмотреть...
Я так понимаю, использовать такой трюк с тайм-аутом не очень хорошо? как его можно обойти?
я просто только начал разбираться в реакте )

[Даниил Маслов]

Константин П, отмечайте решением если помогло

[McBernar]

Константин П, я использовал такую штуку только один раз и тоже ставил таймаут :)

Но вообще, есть npm пакеты для этого, а, возможно, и сам реакт-роутер научился это делать. Наверное, более опытные коллеги здесь подскажут.

[Константин П]

я просто думал, что используя useEffect(() => {}), я не встречусь с такой проблемой и использовать тайм-аут не придется)

[McBernar]

Константин П, ну да, если в didmount положить — то же самое. Mount еще не значит mount.

Answer 2

[Константин П]

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];
    });
    console.log("Obj with cords: ", cordsAfterClick);
    localStorage.setItem("scrollCord", JSON.stringify(cordsAfterClick));
  };

useEffect:

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