window.google 在反应中未定义？答案

【问题标题】：window.google is undefined in react?window.google 在反应中未定义？
【发布时间】：2018-10-06 09:43:14
【问题描述】：

当我调用窗口和控制台记录它时，我会得到一个谷歌道具，如您在此处看到的：

然而，当我尝试拨打window.google 时，我得到了不确定。我在这里遗漏了什么吗？

【问题讨论】：

您是否确保在之后引用 Google API 库而不是之前进行调用？
试试this.google

标签： javascript reactjs google-maps

【解决方案1】：

嘿，我在尝试实例化 new window.google.maps.Map 时遇到了类似的问题，发现这个解决方案对我有帮助。

在声明 <script> 标记时，给它一个标识符，以便稍后在组件中获取它。
在安装组件时，在 Google 脚本上设置 load 事件侦听器，并等待它准备好后再执行更多代码。
需要注意的是，如果您的脚本在此组件挂载之前加载（我们首先希望这样做）并设置事件侦听器，则不会发生任何事情。我们想通过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 
  })
}

【讨论】：

【解决方案2】：

对此的回答较晚，但您可以简单地将这个 const 添加到 React 组件的顶部，在 import 语句下方：

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

它 a) 创建一个变量，然后 b) 使用三元运算符来确定 window.google 是否已加载，c) 如果没有，它将 google 分配为一个空对象。转至@blackmamba。有关更多上下文，请参阅其他 SO question。

【讨论】：

【解决方案3】：

因为这看起来像 Google Maps API，所以它可能是加载顺序问题。

确保拉入 Google Maps 标签的 <script> 位于运行您的 React 代码的之前。

如果这不是问题，您可能需要将您的 React 代码包装在某种 ready() 函数中，以强制它等待 Google 代码准备好。

【讨论】：