reactjs - 如何在 Next.js 中设置全局上下文而不会出现 "Text content did not match"错误？

Question

我有一个 next.js 应用程序需要将 SESSION 数据拉入全局上下文。目前我有:

// _app.js

const App = ({ Component, pageProps }) => {

const start = typeof window !== 'undefined' ? window.sessionStorage.getItem('start') : 0;

  return (
    <ElapsedContext.Provider value={start}>
      <Component {...pageProps} />
    </ElapsedContext.Provider>
  )
};

export default App;

我正在像这样使用我的组件:

function MyComponent(props) {
  const start = useContext(ElapsedContext);
  return (
    // something using start;
  );
}

但是，当我在组件中使用该上下文时，组件会按预期呈现在页面上，但我收到 警告:文本内容不匹配。服务器:“0”客户端:“5.883333333333345”

我认为这是因为它最初传递 0，然后在窗口加载后从 SESSION 存储中提取数字。

1. 如何修复此警告？
2. 我可以放心地忽略这个警告吗？

我已经尝试在 _app.js 文件中使用 useEffect(它在加载窗口后触发)但是初始状态对于我的组件来说是不可用的，无法在初始渲染时构建它需要的东西...

Answer 1

Next.js 在构建期间呈现页面或者它的服务器呈现页面，这意味着 window 并且因此 sessionStorage 不可用，因为它在 Node.js 中运行环境。

如果忽略此警告，React 将在页面加载后执行重新渲染。服务器渲染 React 的伟大之处在于，当页面加载时，React 不必执行重新渲染，因此当出现此警告时，您希望避免它。

不过，由于 sessionStorage 在页面呈现在浏览器中之前不可用，因此您必须等到那时才填充您的上下文。

因此，为您的案例避免此错误的一种方法是执行以下操作:

// context.js
export const ElapsedContext = React.createContext(0);

export const ElapsedProvider = ({ children }) => {
  const [state, setState] = React.useState(0);

  React.useEffect(() => {
    // on client side mount, set starting value
    setState(window.sessionStorage.getItem('start'))
  }, [])

  return (
    <ElapsedContext.Provider
      value={state}
    >
      {children}
    </ElapsedContext.Provider>
  );
};


// pages/_app.js
export default function MyApp({ Component, pageProps }) {
  return <ElapsedProvider><Component {...pageProps} /></ElapsedProvider>
}

// pages/index.js
export default function MyPage() {
  const start = React.useContext(ElapsedContext);
  if (start === 0) {
    return <Loading />
  }

  return <MyComponentThatUsesElapsed />
}