Постоянное состояние Next.js с перехватчиками React и localStorage
Я пытаюсь создать постоянное состояние с помощью хуков 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);
2 ответа
Это предупреждение появляется, потому что значение отличается, когда ваше приложение выполняло SSR с тем, которое было отображено в клиенте (браузере).
Это происходит потому, что ваше значение по умолчанию - 0, и localstorage будет работать в клиенте (браузере), поэтому после того, как ваше приложение получит данные, оно автоматически отобразит значение из localstorage, но теперь это значение отличается от вашего значения по умолчанию, отображаемого из SSR.
Вы можете попробовать совет по комментариям от @bcjohn, используйте перехватчики Effect, чтобы обновить значение.