React Google Maps не отображает маркеры последовательно

Question

У меня есть следующий код для отображения нескольких маркеров на карте React Google Maps, и маркеры не всегда отображаются. Если я закомментирую информацию для столбца 1 и столбца 2, сохраню и раскомментирую эту информацию маркеры будут отображаться в 80% случаев. Если я жестко закодирую только текущее местоположение, маркер всегда будет отображаться. Я понятия не имею, что я делаю не так, скорее всего, ошибка ID-10-T с моей стороны. Заранее спасибо за любую помощь по этому вопросу.

/* global google */

import React from "react"
import { compose, withProps, withStateHandlers } from "recompose"
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker,
    InfoWindow,
} from "react-google-maps"

const MyMapComponent = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=[api key goes here]&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `600px` }} />,
        mapElement: <div style={{ height: `75vh`, width: '50vw' }} />,
    }),
    withStateHandlers(() => ({
        isOpen: false,
    }), {
            onToggleOpen: ({ isOpen }) => () => ({
                isOpen: !isOpen,
            })
        }),
    withScriptjs,
    withGoogleMap
)((props) =>
    <GoogleMap
        zoom={15}
        center={props.currentLocation}
    >
        {props.markerList.map((marker, index) => {
            return (
                <Marker
                    position={{
                        lat: marker.lat,
                        lng: marker.lng
                    }}
                    onClick={props.onToggleOpen}
                    title={marker.name}
                    key={marker.name}
                >
                    {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
                        <div>
                            <h3>Info Window</h3>
                            <h4>Testing</h4>
                        </div>
                    </InfoWindow>}
                </Marker>
            )
        })};

    </GoogleMap>
);

const markers = [
    {
        lat: 38.3332416,
        lng: -95.63961839999999,
        name: "bar 1"
    },
    {
        lat: 38.0332416,
        lng: -95.63971639999999,
        name: "bar 2"
    }
];

class MyFancyComponent extends React.PureComponent {
    state = {
        isMarkerShown: false,
    }


    componentWillMount() {
        this.getGeoLocation()
    }

    getGeoLocation = () => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                position => {
                    this.setState({
                        currentLatLng: {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                            name: "current location"
                        }
                    })
                    markers.unshift(this.state.currentLatLng);
                }
            )
        } else {
            error => console.log(error)
        }
    }

    render() {
        return (
            <MyMapComponent
                currentLocation={this.state.currentLatLng}
                markerList={markers}
            />
        )
    }
}

export default MyFancyComponent;

Answer 1

Дело в том, когда позиция определяется (функция обратного вызова Geolocation.getCurrentPosition() выполняется) MyMapComponent компонент может быть уже отрендерен, это, скорее всего, причина, по которой маркеры отображаются непоследовательно.

Чтобы устранить это поведение, можно рассмотреть следующее решение.

поскольку MyFancyComponent это уже компонент с состоянием, я бы предложил ввести markers укажите и установите начальные значения следующим образом:

class MyFancyComponent extends React.PureComponent {
  state = {
    isMarkerShown: false,
    markers: markers
  };

  //...
}

Затем, после определения текущего местоположения, состояние может быть обновлено следующим образом:

getGeoLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {

        let latLng = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
            name: "current location"
          };

        this.setState( prevState => ({
          currentLatLng: latLng,
          markers: [latLng,...prevState.markers]
        }));
      });
    } else {
      error => console.log(error);
    }
  };

и, наконец, перешел в MyMapComponent компонент в качестве реквизита:

<MyMapComponent
        currentLocation={this.state.currentLatLng}
        markerList={this.state.markers}
      />