Подождите, пока загрузится _app.js, затем запустите компонент на Next.js

Question

Я использую Next.js для разработки веб-сайта.Мне нужно использовать JavaScript SDK для подключения имени пользователя.

Я решил инициировать SDK в _app.js, потому что я думаю, что это должен быть первый файл, загружаемый сервером.поэтому я написал этот код в _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, запускаемая после render.Сказав это, это означает, что сначала запускается рендер, а затем componentDidMount.

Простое решение: в _app.js напишите свой код в конструкторе:

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

Вам не нужноизмените что-либо в page.js.

, в этом случае _app запустите сначала , а затем другие страницы .

вывод будет

_app.js
page

Answer 2

ComponentDiDMount вызывается один раз, только на клиенте (не на сервере), сразу после того, как происходит начальный рендеринг.На этом этапе жизненного цикла вы можете получить доступ к любым ссылкам для ваших детей (например, для доступа к базовому представлению DOM).Метод componentDidMount () дочерних компонентов вызывается раньше, чем у родительских компонентов.

Я думаю, что для вашего случая использования вы можете инициализировать свой SDK на другом хуке REACT или в конструкторе, чтобы убедиться, что он будет выполнендо этого.