reactjs - 如何在 Next.js 中使用 localStorage 而不会出现水合作用错误？

Question

我想使用本地存储来保存 token 并访问它，

我的代码是这样的:

if (typeof window !== 'undefined') {
    localStorage.setItem(key,value)
}

如果我不使用检查窗口类型的部分，我会得到错误:

localStorage is not defined

但这似乎会导致提到的错误 here在文档中可以通过删除 typeof 窗口检查来修复，因为当我刷新页面时这似乎会导致水合作用错误:

Hydration failed because the initial UI does not match what was rendered on the server.

知道要做什么吗？

Answer 1

尝试在 useEffect() 中访问 localStorage:

useEffect(() => {
  localStorage.setItem(key, value);
}, []);