Далее. js постоянное состояние с перехватчиками React и localStorage - PullRequest
Новая
       50

Далее. js постоянное состояние с перехватчиками React и localStorage

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

Я пытаюсь создать постоянное состояние с помощью ловушек localStorage и React в Next. js Приложение SSR и все выглядит хорошо, но когда я перезагружаю страницу после обновления моих данных, я получаю сообщение об ошибке:

Внимание: текстовое содержимое не соответствует. Сервер: "0" Клиент: "5"

Что я могу сделать, чтобы это исправить? Это мой код: 

import React, { createContext, useContext, useReducer } from 'react';
import Reducer from '../utils/Reducer';
const StoreContext = createContext();

let defaultState = {
  count: 0, 
  message: "",
  pageView: 0,
};

export const StoreProvider = ({ children }) => {

  const [state, dispatch] = useReducer(Reducer, {}, () => {

    const localData = process.browser ? localStorage.getItem('state') : null
    return localData ? JSON.parse(localData) : defaultState
  });

  return (
    <StoreContext.Provider value={{state, dispatch}}>
      {children}
    </StoreContext.Provider>
  )
}

export const useStore = () => useContext(StoreContext);

Демонстрация в кодах andbox

1 Ответ

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

Это предупреждение появляется, потому что значение отличается, когда ваше приложение выполняло SSR с тем, которое было отображено в клиенте (браузере).

Это происходит потому, что значение по умолчанию равно 0, и localstorage будет работать в клиенте (браузере), поэтому после того, как ваше приложение извлечет данные, оно автоматически отобразит значение из localstorage, но теперь оно отличается от значения по умолчанию, полученного из SSR.

Вы можете попробовать совет по комментариям от @bcjohn, используйте обработчики реакции реакции для обновления значения.

...