React中嵌套组件中的全局变量

Question

I have nested component. Component Map for getting Google Map, and component for contain markers in this map. Marker inside Map

window.google variable available in Map component, but it undefined inside Marker comopnent.

Map:

import React from 'react'
import { Marker } from './Marker'
class Map extends React.Component {
  getGoogleMaps() {
        const script = document.createElement("script");
        const API = 'AIzaS';
        script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&v=3&callback=initMap`;
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);
    }
  componentDidMount() {
    this.getGoogleMaps()
    window.initMap = () => {
      var map = new window.google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: {lat: 40.6947591, lng: -73.9950086},
        mapTypeControl: false
      })
      window.map = this.map
      console.log('<Map/> google:',window.google);
    }
   }
  render() {
    return (
      <div>
        <div id="map" ></div>
        <Marker/>
      </div>
    )
  }
}
export { Map }

:

 import React from 'react'
    class Marker extends React.Component {
      render() {
        return(
          <div>
            {console.log('<Marker/> google:',window.google)}
          </div>
        )
      }
    }
    export { Marker }

So .... Why global variable window.google is good inside Map component and undefined in Marker ?

Thanks!

Answer 1

You are checking some wrong place as I have used same to same your code in Plunker, I can access both the place window.google variable, please check below mentioned plunk for your reference.

Check Here

Answer 2

It's because method getGoogleMaps() is async and you call it in componentDidMount. You renders Marker before Google Maps script has been loaded.

For example you can use isLoading state.

class ... {
  state = {
    isLoading: true
  };

  componentDidMount() {
    this.getGoogleMaps()
    window.initMap = () => {
      ...
      window.map = this.map;
      //update state here
      console.log('<Map/> google:',window.google);
    }
  }

  render() {
    return this.state.isLoading 
    ? <div>loading...</div>
    : (
      <div>
        <div id="map" ></div>
        <Marker/>
      </div>
    )
  }
}