React 和 Next.js 中的窗口未定义错误 [重复]

Posted 2023-02-22

【中文标题】React 和 Next.js 中的窗口未定义错误 [重复]

【英文标题】：Window is not defined errors in React and Next.js [duplicate]

【发布时间】：2021-12-04 19:51:20

【问题描述】：

我正在使用 React Hooks 和 NextJS。我即将创建一个导航栏及其功能。但是，当我要刷新页面时，会显示此错误。

当我在我的 React 项目中使用这段代码时，它运行得非常好。

谁能帮我看看哪里出错了？enter image description here

我还在这里附上我的完整代码：enter image description here

【问题讨论】：

nextjs 不允许您直接操作 DOM。在使用框架时避免使用 vanilla javascript

nex.js 在前端（在浏览器中）和服务器上运行。所以当它在服务器上运行时，window 对象没有被定义。此外，在您的情况下，CSS 媒体查询可能绰绰有余。正如艾敏指出的那样

【参考方案1】：

正如 Shivam 在评论中提到的，您不能在服务器中使用窗口对象。 你可以这样做

useEffect(() => 
    if (typeof window !== "undefined") 
      window.addEventListener("resize", showButton)
    
    return () => window.removeEventListener("resize", showButton)
  , [showButton)

【参考方案2】：

试试这个

window.addEventListener('resize', function() console.log('addEventListener - resize'); , true);

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

这是如何回答这个问题的？