等待 _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 is invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components.

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

Answer 2

根据React lifecyclecomponentDidMount运行后render。这么说，这意味着它运行先渲染然后 componentDidMount.

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

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

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

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

输出将是

_app.js
page

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

Wait _app.js loaded then run component on Next.js

javascript

reactjs

async-await

next.js

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

Wait _app.js loaded then run component on Next.js

javascript

reactjs

async-await

next.js

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