window.google не определен в реакции?

Question

Когда я вызываю журнал окна и консоли, я получаю гугл-реквизит, как вы видите здесь:

Тем не менее, когда я пытаюсь позвонить window.google Я получил неопределенный.Я что-то здесь упускаю?

Answer 1

Поздний ответ на этот вопрос, но вы можете просто добавить это const в начало вашего компонента React, ниже операторов импорта:

const google = window.google = window.google ? window.google : {}

Это а) создает переменную, а затем б) использует троичный операторчтобы определить, загружен ли window.google, и c) если нет, он назначает Google как пустой объект.Х / т @blackmamba.См. Этот другой SO вопрос для получения дополнительной информации.

Answer 2

Эй, я столкнулся с подобной проблемой, пытаясь создать экземпляр new window.google.maps.Map , и обнаружил, что это решение мне помогло.

1. При объявлении вашего<script>, дайте ему идентификатор, чтобы вы могли получить его позже в своем компоненте.

2. При монтировании вашего компонента настройте прослушиватель событий load на сценарии Google и дождитесь его готовности, прежде чем выполнять какой-либо другой код.

3. Одно предостережение: если ваш скрипт загружается до монтирования этого компонента (на что мы надеемся в первую очередь) и настраивает прослушиватель событий, ничего не произойдет.Мы хотим поймать это положительное условие с помощью if (window.google)

componentDidMount() {
  const googleScript = document.getElementById('google-map-script')

  if (window.google) {
    // All is good! Carry on 
  }

  googleScript.addEventListener('load', () => {
    // Patiently waiting to do the thing 
  })
}

Answer 3

Так как это похоже на API Карт Google, вероятно, это проблема порядка загрузки.

Убедитесь, что <script>, который вытягивает тег Google Maps, предшествует тому, который запускает ваш код React.

Если это не проблема, вам может понадобиться обернуть ваш код React в какую-то функцию ready(), чтобы заставить его ждать, пока код Google не будет готов.