Question

当我在我的React项目中加载包含地图的组件时，我得到“google is undefined”。原因似乎是当互联网连接不够好时，谷歌api脚本没有及时加载。

我正在app.js中加载地图api脚本，如此。

componentWillMount() {
    const API_KEY = process.env.GOOGLEMAP_API_KEY;
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;
    script.async = true;
    script.defer = true;
    document.head.append(script);
  }

有没有办法在返回renderApp之前检查google地图脚本是否已加载，或者在应用中的其他地方使用支票？我曾尝试使用typeOf google和typeOf google.maps，但他们只返回undefined。

renderApp() {
      return (
        <div>
          <Header />
          <Main />
        </div>
      );
  }

render() {
    return (
      <div>
        {this.renderApp()}
      </div>
    );
  }

除了使用库，react-async-script-loader之外，如何在渲染组件之前检查谷歌地图是否可用。 React-async-script-loader可能是解决方案，但它需要对我的地图组件进行一些重大的修改。

我在网上发现了一些讨论，但似乎没有任何效果。

Answer 1

你可以在网址中传递一个回调参数。它将被称为加载异步文件。

当API准备就绪时，它将调用使用的指定函数回调参数。

     MinData <- Data %>% mutate(Min = 
     min(colnames(Data)[1:5]))

示例：

&callback=initMap

Google未定义：如何检查是否在React

1 个答案: