2

我正在尝试在 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);

代码沙盒中的演示

4

1 回答 1

1

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

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

您可以尝试来自@bcjohn 的评论建议，使用Effect 反应挂钩来更新值。

于 2020-01-27T04:13:12.130 回答