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

【问题标题】：Wait _app.js loaded then run component on Next.js等待 _app.js 加载，然后在 Next.js 上运行组件
【发布时间】：2018-12-03 08:28:49
【问题描述】：

我正在使用 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 之前安装？

【问题讨论】：

【解决方案1】：

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

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

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

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

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

输出将是

_app.js
page

【讨论】：

【解决方案2】：

ComponentDiDMount 只在客户端调用一次（不在客户端服务器），在初始渲染发生后立即。在此刻在生命周期中，您可以访问您孩子的任何参考（例如，访问底层 DOM 表示）。组件DidMount() 子组件的方法在父组件之前调用组件。

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

【讨论】：