Маркеры карты не загружаются на componentDidMount - PullRequest
Новая
       43

Маркеры карты не загружаются на componentDidMount

0 голосов
/ 01 октября 2019

У меня есть карта, которая получает местоположение пользователя из координат области просмотра, затем использует эти координаты для получения маркеров из API. Проблема в том, что мои маркеры появляются только после того, как я переместил карту. Я не совсем понимаю, что мне не хватает: 

componentDidMount(){
        this.getInitialPosition();
        this.fetchLocations();
        this.getMarkers();
    }

Затем моя функция определения местоположения пользователя: 

getInitialPosition = () => {
        navigator.geolocation.getCurrentPosition(position => {
            let newViewport = {
                height: "100vh",
                width: "100vw",
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                zoom: 15
            }
            this.setState({
                viewport: newViewport
            });
        });
    }

Затем я получаю маркеры из моего API: 

fetchLocations = () => {
        fetch(`http://localhost:3000/locations/${this.state.viewport.latitude}/${this.state.viewport.longitude}`)
        .then(resp => resp.json())
        .then(locations => this.setState({locations}))
    }

И, наконец, маркеры: 

getMarkers = () => {
        return this.state.locations.map(location => {
            return (
                <Marker key={location.id} offsetLeft={-25} offsetTop={-70} latitude={parseFloat(location.lat)} longitude={parseFloat(location.lng)}>
                    <div className="marker-styles" onClick={() => {this.handleLocationClick(location.id)}} >
                        <p>{location.reviews}</p>
                    </div>
                </Marker>
            );
        });
    }

Потом, когда я вызываю карту: 

                <MapGL
                    {...this.state.viewport}

                    onClick={this.mapClick}
                    attributionControl={false}
                    onViewportChange={this.onViewportChange}
                    mapboxApiAccessToken={TOKEN}
                    mapStyle="mapbox://styles/mapbox/streets-v10">
                    {this.getMarkers()}                        
                </MapGL>

Я получаю карту, но я не получаю маркеры,Может ли кто-нибудь указать мне правильное направление? Я думаю, что проблема заключается в моем шатком понимании обещаний и жизненного цикла компонентов, но я, честно говоря, не смог понять это. Я вставил полный (грязный) код здесь: https://pastebin.com/j8dzYAsk

1 Ответ

0 голосов
/ 01 октября 2019

Проблема в том, что getInitialPosition и fetchLocations являются асинхронными - и данные, которые они получают, еще не были получены при вызове getMarkers

Во-первых, я сделал getInitialPositionвернуть Обещание, таким образом, с fetchLocations легко работать, как только он также возвращает Обещание, возвращенное fetch

Тогда это просто случай ожидания разрешения этих двух обещаний, используя Promise.all,и как только все закончится, вы звоните this.getMarkers

componentDidMount(){
    Promise.all([
        this.getInitialPosition(),
        this.fetchLocations()
    ]).then(this.getMarkers);
}
getInitialPosition = () => {
    return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(position => {
            let newViewport = {
                height: "100vh",
                width: "100vw",
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                zoom: 15
            }
            this.setState({
                viewport: newViewport
            });
            resolve();
        });
    });
}
fetchLocations = () => {
    return fetch(`http://localhost:3000/locations/${this.state.viewport.latitude}/${this.state.viewport.longitude}`)
    .then(resp => resp.json())
    .then(locations => this.setState({locations}));
}
...