Возникли проблемы с сохранением состояния React с использованием localStorage с приложением SSR (Next. js) - PullRequest
Новая
       5

Возникли проблемы с сохранением состояния React с использованием localStorage с приложением SSR (Next. js)

0 голосов
/ 10 января 2020

Приложение, которое я создаю, имеет настраиваемые параметры. Я хотел бы загрузить настройки по умолчанию, тогда, когда пользователь вносит какие-либо изменения, пользовательские настройки будут сохранены в localStorage. Теперь, когда пользователь вернется в следующий раз, мы загрузим настройку из его localStorage.

Я использую контекст React, например, так ... 

    const SettingsContextProvider = (props: any) => {
        const [settings, setSettings] = useState(getSettings());

        useEffect(() => {
            localStorage.setItem('settings', JSON.stringify(settings))
        }, [settings]);

        return (...some jsx...);
    }

Затем getSettings (). .. 

   getSettings() {
       // get from local storage
       if (process.browser) {
           const localSettings = localStorage.getItem('settings');
           if (localSettings) return JSON.parse(localSettings );
       }

       // fall back to default settings
       return "Something else";
   }

У меня проблема в том, что на стороне сервера (на стороне узла) у нас нет локального хранилища (поэтому я проверяю на process.browser), поэтому он возвращается к настройкам по умолчанию. Затем, когда он попадает в браузер, он, кажется, снова вызывает getSettings(), и в этом случае у нас действительно есть локальное хранилище, и оно загружается оттуда.

Это работает, , но затем я получаю ошибку :

Text content did not match. Server: "Something else" Client: "Something custom"

Итак, я понимаю, что сервер не соответствует клиенту, и он расстроен из-за этого. Я понимаю, ПОЧЕМУ это происходит, но у меня НЕТ ИДЕИ, как это исправить. Может быть, мне нужно внедрить редукторы или использовать куки?

Кто-нибудь сталкивался с этим?

Я более чем рад поделиться своим полным кодом репо, если это поможет.

1 Ответ

0 голосов
/ 10 января 2020

Я довольно комфортно реагирую, но почти никогда не использовал ловушки реакции в моем собственном коде.

Однако я чувствую, что не буду помещать обновление localStorage в функцию useEffect вот так (и я могу быть совершенно неправ в этом).

Итак, во-первых, я бы проверил, что функция useEffect вызывается, когда вы ожидаете, что она будет.

А потом я написал бы функцию 

 const updateSettings = (newSettings) => {
      localStorage.setItem('settings', JSON.stringify(newSettings))
      setSettings(newSettings);
 }

и использовал бы эту функцию updateSettings для передачи к компонентам.

НО, я мог бы быть полностью там, как я сказал, что не не используйте реактивные крючки и имеете только теоретическое понимание.

...