Блог

Главная - Вопросы по программированию - Переключатель темы не сохраняется при обновлении, несмотря на использование локального хранилища

Переключатель темы не сохраняется при обновлении, несмотря на использование локального хранилища

#javascript #reactjs #react-hooks #local-storage #themes

#javascript #reactjs #реагирующие хуки #локальное хранилище #темы

Вопрос:

Выполнение переключателя темы для проекта, который отлично работает, если не обновляется. Вот код:

  const initialTheme = () => window.localStorage.getItem('theme') || true;
    const [lightTheme, setLightTheme] = useState(initialTheme);
    const { body } = document;

    useEffect(() => {
        window.localStorage.setItem('theme', lightTheme);

        lightTheme === true
            ? body.parentElement.dataset.theme = 'light'
            : body.parentElement.dataset.theme = 'dark'
    }, [lightTheme])

Поэтому, когда применяется переключение, тема данных в теге html устанавливается либо светлой, либо темной.
Однако, когда я обновляюсь, страница возвращается к темной теме, несмотря ни на что. У меня нет темы данных в теге html, я делаю это динамически с помощью приведенного выше кода.

Странная часть заключается в том, что значение в localStorage всегда правильное. Когда я делаю его светлой темой, значение localStorage равно true — как и должно быть, — а когда темная тема, значение равно false (снова исправьте). Это значение localStorage сохраняется при обновлении.

Пожалуйста, помогите, если можете, и спасибо!

Комментарии:

1. при инициализации lightTheme вы просто передаете функцию, в которую входит тело useState функции. Вы должны вызвать эту функцию, чтобы оценить значение и передать его следующим useState образом, const [lightTheme, setLightTheme] = useState(initialTheme());

Ответ №1:

Когда вы получаете свои данные обратно из localStorage, вы получаете либо строковое значение "true" , либо строковое значение "false" . Поэтому значение lightTheme никогда не вычисляется true , и ваш код всегда отображает вторую часть вашего троичного оператора, которая является темной темой. Попробуйте вместо этого сохранить 'light' или 'dark' в localStorage и переключать на основе этих значений.