reactjs - 使用 react 添加 Google 地图时出错 - TypeError：无法读取未定义的属性“地图”

Question

// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Map from "./Map.js"


class App extends React.Component {



  constructor(props) {
    super(props);

    this.loadScript = this.loadScript.bind(this);
  }

  loadScript() {

    const API_KEY = process.env.REACT_APP_API_KEY;
    const url = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;

    const s = document.createElement("script");
    s.src = url;
    document.head.appendChild(s);
  }

  componentWillMount() {

    this.loadScript();

  }


  render() {

    return (

      <div>

        <Map />


      </div>


    );

  }
}

export default App;

//Map.js

import React from "react"

export default class Map extends React.Component {

    constructor(props) {
        super(props);

        this.loadMap = this.loadMap.bind(this);
    }

    loadMap() {

        const map = new window.google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    }

    componentWillMount() {

        this.loadMap();
    }


    render() {


        return (


            <div id="map" style={{ width: 100, height: 100 }}></div>

        );

    }




}

您好，我对 React 完全陌生，我正在尝试在没有第三方库帮助的情况下加载 Google 地图。

我已经动态创建了一个脚本标签并将其插入到 DOM 中。我收到此错误，试图访问脚本中的变量。

我的猜测是在加载脚本之前正在访问“地图”。我迷失了，关于如何解决这个错误。

标签： reactjs

Answer 1

当您以编程方式加载脚本时，您可以侦听“onload”事件并在加载脚本时执行其余逻辑。在这种情况下，您的loadScript函数可能如下所示：

loadScript() {

  const API_KEY = process.env.REACT_APP_API_KEY;
  const url = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;

  const s = document.createElement("script");
  s.src = url;
  document.head.appendChild(s);
  s.onload = function(e){
     console.info('googleapis was loaded');            
  }
}

您可以将scriptLoaded状态添加到您的 App 组件并在onload函数中更改它，在这种情况下，您需要仅在以下情况下进行scriptLoaded渲染true：

  <div>
    {this.state.scriptLoaded && <Map />}
  </div>