Window.scrollTo не работает внутри useEffect - reactJS

Я пытаюсь выполнить window.scrollTo при первом рендеринге, используя функцию useEffect. Я сохраняю позицию внутри localStorage, но она не работает.

Не работает на рендеринге первой страницы:

useEffect(() => {
  window.scrollTo(0, localStorage.getItem('position'));
}, []);

Стоит отметить, что если я помещу функцию прокрутки внутрь функции и вызову ее через кнопку onClick, она сработает.

Это работает, если вызывается из onClick:

const setScroll = () => {    
  window.scrollTo(0, localStorage.getItem('position'));
}

Как я могу это решить?

Установлено ли какое-либо значение localStorage.getItem('position')? Должен ли он анализироваться в формате JSON? Что именно не работает? Пожалуйста, будьте более конкретными. Что/где это значение сохраняется в localStorage?

Drew Reese 17.05.2022 04:45
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
1
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вызывается функция useEffect, страница еще не отрисована. Попробуйте вызвать window.scrollTo на следующем кадре:

useEffect(() => {
  setTimeout(() => window.scrollTo(0, localStorage.getItem('position')), 0);
}, []);

Это помогло мне решить проблему! Единственная модификация, которую я сделал, - установить время ожидания более 100 мс. Спасибо!

Marcellin Khoury 17.05.2022 04:57

Другие вопросы по теме