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

Posted 2023-02-22

【中文标题】Next.js 具有 React 钩子和 localStorage 的持久状态

【英文标题】：Next.js persistent state with React hooks and localStorage

【发布时间】：2020-05-10 03:08:36

【问题描述】：

我正在尝试在 Next.js s-s-r 应用程序中使用 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

【问题讨论】：

也许这个问题能帮上忙。Warning: Prop className did not match.

【参考方案1】：

出现该警告是因为当您的 应用程序使用客户端（浏览器）中呈现的 s-s-r。

这是因为你的默认值为 0，而 localstorage 将在客户端（浏览器）中工作，所以在你的应用程序获取数据后，它会自动从 localstorage 呈现值，但现在的值与你呈现的默认值不同来自 s-s-r。

您可以尝试@bcjohn 的评论建议，使用Effect react hooks 来更新值。