等待_app.js加载，然后在Next.js上运行组件

Question

我正在使用Next.js开发一个网站。 我需要使用JavaScript SDK来连接用户登录名。

我决定在_app.js中初始化SDK，因为我认为它应该是服务器加载的第一个文件。 所以我用_app.js

编写了这些代码

componentDidMount () {
    window.mySDK = new userInfoSDK()
    console.log('_app')
 }

并在page.js

中写了这样的内容

async componentDidMount () {
   console.log('page')
   const loginStatus = await window.mySDK.getInfo()
 }

我得到的结果是window.mySDK is not defined

控制台显示

page _app.js

是不是意味着page.js组件是在_app.js之前安装的？

Answer 1

  

ComponentDiDMount仅在客户端（而不是客户端）上被调用一次   服务器），则在初始呈现之后立即进行。在此刻   在生命周期中，您可以访问您孩子的所有引用（例如，   访问底层的DOM表示形式）。 componentDidMount（）   子组件的方法在父组件的方法之前被调用   组件。

我认为对于您的用例，您可以在另一个REACT钩子上或在构造函数中初始化您的SDK，以确保它会在之前执行。

Answer 2

根据React lifecycle componentDidMount在render之后运行。这样说，就意味着它首先运行渲染，然后运行componentDidMount。

简单的解决方案： 在_app.js中，用构造函数编写代码：

constructor(props) {
    super(props)
    console.log('_app')
  }

您无需更改page.js中的任何内容。

在这种情况下， _app 首先运行 ，然后运行其他页面。

输出将是

_app.js
page