Question

我正在尝试在Next.js SSR应用程序中使用localStorage和React钩子创建持久状态，并且一切看起来都不错，但是在更新数据后重新加载页面时，我得到了错误提示：

警告：文本内容不匹配。服务器：“ 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);

Demo in codesandbox

Answer 1

出现该警告是因为当您的应用程序使用客户端（浏览器）中呈现的代码执行SSR。

发生这种情况是因为您的默认值是0，并且localstorage将在客户端（浏览器）中运行，因此在您的应用程序获取数据后，它将自动从localstorage呈现值，但是现在的值与呈现的默认值不同来自SSR。

您可以尝试@bcjohn的评论建议，useEffect react挂钩更新值。

具有React挂钩和localStorage的Next.js持久状态

1 个答案: