reactjs 使用useEffect访问Next.js中的window对象

zwghvu4y 于 2023-04-11 发布在 React

关注(0)|答案(1)|浏览(266)

我需要在我的Next.js应用程序中访问window.localStorage，但由于Next.js允许服务器端和客户端渲染，当我尝试使用本地存储设置状态的默认值时，如下所示：

useState(window.localStorage.getItem("tag"))

它会抛出一个错误，说window是未定义的。为了找到一种方法来使它工作，我使用了一个useEffect，并在组件完全渲染后设置state的值，如下所示：

useEffect(() => {
    setState(localStorage.getItem("tag"));
  }, []);

但我不确定这是否是正确的方法。这是一个好的解决方案还是有更好的方法？谢谢。

1条答案

这是正确的。
由于水合作用，当组件在后端创建时，它不能访问window对象。在我看来，useEffect并没有在后端运行。我猜后端只组装第一帧（挂载）渲染。
因此useEffect是回避这个问题的方法。当然人们也可以检查window是否存在，但我觉得useEffect更优雅。