Google-карты-реагировать не работает

Question

У меня есть MapContainer:

import React, { Component } from "react";
import ReactDOM from "react-dom";
export class MapContainer extends Component {
componentDidUpdate(props) {
    this.loadMap();
}
loadMap() {
    if (this.props && this.props.google) {
        const {google} = this.props;
        const maps = google.maps;
        const mapRef = this.refs.map;
        const node = ReactDOM.findDOMNode(mapRef);
        const mapConfig = Object.assign({}, {
            center: {lat: 50.4418782, lng: 30.5107196},
            zoom: 15,
        })
        this.map = new maps.Map(node, mapConfig);
            addMarker({lat: 50.4418782,lng: 30.5107196});
            function addMarker(coords) {
                const marker = new google.maps.Marker({
                    position: coords,
                    map: this.map
                });
            }
     }
 }



render() {
    const style = {
        width: '100%',
        height: '40rem',
        margin: '2rem auto'
    };

    return (
        <div ref="map" style={style}>
            loading map...
        </div>
    )
  }
}

export default MapContainer;

Когда это началось, у меня есть TypeError:

Невозможно прочитать свойство 'map' из undefined. введите описание изображения здесь

В чем дело?

Answer 1

В React функции не связаны автоматически с экземпляром компонента ( документация), они должны быть явно связаны. Вы могли бы использовать bind функция в этом отношении, в представленном примере строка:

addMarker({lat: 50.4418782,lng: 30.5107196});

необходимо заменить на:

addMarker.bind(this)({ lat: 50.4418782, lng: 30.5107196 });