Javascript 窗口未在Next.js React app中定义

在我的应用程序中，我似乎无法访问

窗口

：

未处理的拒绝（ReferenceError）：未定义窗口

---

将代码从

componentWillMount（）

移动到

componentDidMount（）

：

在Next.js中，

componentDidMount（）

仅在

window

和其他特定于浏览器的API可用的客户端上执行。从：

Next.js是通用的，这意味着它首先在服务器端执行代码， 然后是客户端。窗口对象仅存在于客户端，因此如果 您绝对需要在某个React组件中访问它，您 应该把代码放在componentDidMount中。此生命周期方法将 只能在客户端上执行。您可能还需要检查是否存在 没有适合您需要的其他通用库

同样地，

componentWillMount（）

将出现在React的v17中，因此在不久的将来使用它实际上是不安全的。

componentWillMount（）

lifecycle钩子在服务器端和客户端都起作用。如果服务器在页面服务期间不知道

窗口

或

文档

，建议将代码移动到

解决方案1:

componentDidMount（）

或解决方案2

如果您只想在其中执行，则可以编写如下内容：

componentWillMount（）{
如果（窗口类型！==“未定义”）{
console.log（'window.innerHeight'，window.innerHeight）；
}
}

另一种解决方案是使用

process.browser

仅在客户端渲染期间执行命令

if（process.browser）{
//仅客户端代码
}

无SSR

从“下一个/动态”导入动态
常量dynamiccomponent with nossr=动态(
（）=>导入（'../components/hello3'），
{ssr:false}
)
函数Home（）{
返回(
主页在这里

)
}
导出默认主页

在类组件的构造函数中，可以添加

if (typeof window === 'undefined') {
    global.window = {}
}

例如：

import React, { Component } from 'react'

class MyClassName extends Component {

    constructor(props){
        super(props)
        ...
        if (typeof window === 'undefined') {
            global.window = {}
        }
}

---

这将避免错误（在我的情况下，错误将在我单击重新加载页面后发生）。

如果使用React Hooks可以将代码移动到：

import*as React from“React”；
导出常量MyComp=（）=>{
React.useffect（（）=>{
//这里有一扇窗户。
log（“window.innerHeight”，window.innerHeight）；
}, []);
返回（）
}

---

useffect

中的代码只在客户端（在浏览器中）上执行，因此它可以访问

window

当我在next中开发web应用程序时，我遇到了同样的问题。js这解决了我的问题，您必须在生命周期方法或react钩子中引用窗口对象。例如，假设我想用redux创建一个store变量，在这个store中，我想使用一个windows对象，我可以按如下方式操作：

let store
useEffect(()=>{
    store = createStore(rootReducers,   window.__REDUX_DEVTOOLS_EXTENSION__ && 
    window.__REDUX_DEVTOOLS_EXTENSION__())
 }, [])
 ....

---

因此，基本上，当您使用window的对象时，总是使用钩子来处理，或者使用

componentDidMount（）

Lifecycle方法

我必须从URL访问哈希，所以我提出了这个方法

const hash=global.window&&window.location.hash；

将代码移动到componentDidMount（），该命令仅在使用

窗口的客户端上执行。此外，
componentWillMount（）
正在v17中https://github.com/zeit/next.js/wiki/FAQ#i-使用-a-library-which-throws-window-is-undefined此选项即使在库访问“window”时仍有效imported@PeterMortensen，SSR=服务器端渲染如何从外部js访问变量？与var myVar=“bla”@bl4ckck类似，不幸的是，您只能在组件（而不是函数）上使用动态导入，这似乎是在react功能组件中正确执行此操作的唯一方法。尽管此方法有效，但如果您在useEffect内部执行更新状态的操作，请确保添加空的
[]
作为副部长。刚刚再次使用了这个答案。无法再次升级投票，因此让我在此留下感谢：）。此方法现在已被弃用。当前方法是检查
if（typeof window==“undefined”）{//client-side code}
您的意思是
typeof window！==“undefined”
，因为如果不是服务器端的话，那家伙需要编辑他的评论有关于
全局的文档吗？最整洁的解决方案
if (typeof window === 'undefined') {
    global.window = {}
}

import React, { Component } from 'react'

class MyClassName extends Component {

    constructor(props){
        super(props)
        ...
        if (typeof window === 'undefined') {
            global.window = {}
        }
}

let store
useEffect(()=>{
    store = createStore(rootReducers,   window.__REDUX_DEVTOOLS_EXTENSION__ && 
    window.__REDUX_DEVTOOLS_EXTENSION__())
 }, [])
 ....