window.google 在反应中未定义？

Question

当我调用窗口并控制台记录它时，我得到一个 google prop，如下所示：

然而，当我尝试打电话时，window.google我得到了未定义的信息。我在这里错过了什么吗？

Answer 1

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

1. 声明<script>标签时，为其指定一个标识符，以便稍后可以在组件中获取它。

2. 在安装组件时，在 Google 脚本上设置一个load事件侦听器，并等到它准备好后再执行任何其他代码。

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 2

由于它看起来像 Google Maps API，因此可能是加载顺序问题。

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

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