Изучение React и использование componentDidMount вызывает ошибку

Question

Может кто-нибудь понять, почему следующий метод componentDidMount вызывает ошибку, пожалуйста?Если метод componentDidMount удален, карта загружается без ошибок.

Сообщение об ошибке показано ниже.При просмотре кода в браузере (инструменты Chrome) «this» не устанавливается и, следовательно, вызывает ошибку.

Метод оскорблений

componentDidMount() {
    navigator.geolocation.getCurrentPosition(function(position) {
      this.setState({
        location: {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        }
    });
  }

Сообщение об ошибке

Line 35:  Parsing error: Unexpected token, expected ","
    const position = [this.state.location.lat, this.state.location.lng]

Полный код

import React from 'react'
import L from 'leaflet'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'

var myIcon = L.icon({
    iconUrl: 'images/maps-icon-12.png',
    iconSize: [25, 41],
    iconAnchor: [12.5, 41],
    popupAnchor: [0, -41]
});

class MyMap extends React.Component {
  constructor () {
    super()
    this.state = {
      location: {
        lat: 10.7268906,
        lng: -30.3580425,
      },
      zoom: 13
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(function(position) {
      this.setState({
        location: {
          lat: position.coords.latitude,
          lng: position.coords.longitude
       }
    });
  }

  render () {
    const position = [this.state.location.lat, this.state.location.lng]
    return (
        <Map center={position} zoom={this.state.zoom}>
          <TileLayer
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
          <Marker position={position} icon={myIcon}>
            <Popup>
              <span>Booyaa</span>
            </Popup>
          </Marker>
        </Map>
      )
  }
}

export default MyMap;

Answer 1

Нет закрытия }) для setState.

Проблема с this заключается в том, что функция обратного вызова имеет другой контекст, хотя ожидается, что лексический this должен использоваться с функцией стрелки:

componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      this.setState({
        location: {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        }
      });
    });
}