等待_app.js加載，然后在Next.js上運行組件

Question

我正在使用Next.js開發一個網站。 我需要使用JavaScript SDK來連接用戶登錄名。

我決定在_app.js初始化SDK，因為我認為它應該是服務器加載的第一個文件。 所以我在_app.js編寫了這些代碼

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

並在page.js寫了這樣的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的生命周期， componentDidMount在render之后運行。 這么說，意味着它首先運行渲染，然后運行componentDidMount 。

簡單的解決方案：在_app.js將代碼寫入構造函數中：

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

您無需更改page.js任何page.js 。

在這種情況下， _app 首先運行，然后再運行其他頁面 。

輸出將是

_app.js
page