は未定義ではあるが、まだコンソールに印刷されている

Question

私の反応アプリで働いているGoogleマップを取得しようとしています。ここで

は本当に珍しいことの両方console.logsのプリントである私のMap.jsxコンポーネント

import React, { Component } from 'react'; 
import key from '../key'; 

class Map extends Component { 

    componentDidMount() { 
    let script = document.createElement('script') 

    script.setAttribute('type', 'text/javascript'); 
    script.setAttribute('src', `https://maps.googleapis.com/maps/api/js?key=${key.API_KEY}&callback=initMap`); 
    document.getElementsByTagName('head')[0].appendChild(script); 

    window.initMap =() => { 
     console.log('initMap'); 
     console.log(google); 
     this.map = new google.maps.Map(this.refs.map, { 
     }); 
    } 
    } 

    render() { 
    const mapStyle = { 
     height: "400px", 
     width: "100%" 
    }; 

    return <div ref="map" style={mapStyle} />; 
    } 

} 

export default Map; 

とindex.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter as Router, Match } from 'react-router'; 
import GoogleMapsLoader from 'google-maps'; 
import 'semantic-ui-css/semantic.css'; 

import App from './App'; 
import StakeCreator from './components/StakeCreator'; 

const Root =() => { 
    return (
    <Router> 
     <div> 
     <Match exactly pattern="/" component={StakeCreator} /> 
     <Match pattern="/stake/:stakeId" component={App} /> 
     </div> 
    </Router> 
) 
} 
GoogleMapsLoader.load(function(google) { 
    render(
     <Root />, 
     document.getElementById('root') 
    ); 
}) 

です。しかし、私はまだ

エラーが出るの「Google」が

が定義されていない私は、エラーがwebpackHotDevClient

についてgithubの上の大きな問題があるから来て気づくんそれ

https://github.com/webpack/webpack/issues/2145

しかし、明確な修正がないようです。 、Map.jsxに続い

import key from './key.js' 
GoogleMapsLoader.KEY = key.API_KEY 

このようなあなたのcomponentDidMount()を設定します：

Answer 1

[OK]を、私は最初のオフ、そのようなindex.jsでAPIキーを扱う...右ここにあなたの修正を持って

componentDidMount() { 
    let google = window.google 
    this.map = new google.maps.Map(this.refs.map, { 
     center: {lat: 33.7065883 , lng: -117.9818307}, 
     zoom: 8 //YOU HAVE TO SET A ZOOM LEVEL 
    }) 
} 

それは私のために働く、私は地図が表示されている、素晴らしいね！