Next js 中本地存储的延迟初始化问题

Question

我在引用时遇到问题

window

；错误描述为：

ReferenceError：窗口未定义

我正在尝试使用延迟初始化来设置本地存储值：

const [colors, setColors] = useState(()=>{
  if(window){
    return localStorage.getItem("_appColor") ?
    JSON.parse(localStorage.getItem("_appColor")) : null
  }else {
    return null
  }
});

我尝试在上面的代码中添加对

window

对象的检查，但我仍然收到引用错误。

我没有使用

useEffect

，因为它会导致

color

对象最初未定义，然后它会从本地存储获取数据。

如何在客户端组件内部对

useState

钩子使用延迟初始化来获取本地存储数据而不会遇到引用错误？

Answer 1

在 Next.js 中 SSR 期间无法访问

window

。为了解决这个问题，我们可以使用

useEffect

，但我们不想这样做，因为初始值最初并未定义。要解决这个问题，可以使用

useLayoutEffect

。

useLayoutEffect

旨在在渲染组件之前运行代码，定义颜色的初始值。我提供了它的更新代码。

    const [colors, setColors] = useState(null);
    useLayoutEffect(() => {
        if(window) {
            setColors(localStorage.getItem("_appColor") ?
            JSON.parse(localStorage.getItem("_appColor")) : null)
        }else {
            setColors(null) 
        }
    }, []);

您可以在这里

useLayoutEffect

获取更多信息