Почему я не отрисовываю этот цикл правильно? - PullRequest
Новая
       11

Почему я не отрисовываю этот цикл правильно?

0 голосов
/ 23 января 2019

Я пишу компонент, который рисует маршрут и 2 маркера на карте, у меня есть цикл, который получает все позиции для рисования маркера, но я не получаю массив во время, чтобы сделать визуализацию данных .

Я пытался поставить условие, но, похоже, не работает. Проблема в состоянии, я помещаю массив в состояние, но из-за асинхронного процесса я не могу получить его вовремя для рендеринга. 

import React, { useEffect, useState } from 'react';

import GoogleMapMaker from './GoogleMapMarker';
import GoogleMapReact from 'google-map-react';

const GoogleMapsComponent = (props) => {
    const { blackboxLocation, showClaimLocation, showBlackboxLocation } = props;

    const [locationState, setLocationState] = useState([]);
    const [markerArray, setMarkerArray] = useState([]);

    useEffect(() => {
        setLocationState(blackboxLocation);    
    }, [blackboxLocation]);

    useEffect(() => {
        if(locationState) {
            setMarkerArray([locationState[0], locationState[locationState.length]]);
        }
    }, [locationState]);

    const mapProps = {
        center: {
            lat: 59,
            lng: 30
        },
        zoom: 11
    };

    const handleGoogleMap = (google) => {
        const routeProps = new google.maps.Polyline({
            strokeColor: '#081E3E',
            strokeOpacity: 0.8,
            strokeWeight: 4,
        });

        routeProps.setMap(google.map);


        drawLocationAndCenter(google, routeProps);
    }

    const drawLocationAndCenter = (google, routeProps) => {
        if(showBlackboxLocation) {
            const bounds = new google.maps.LatLngBounds();
            const path = routeProps.getPath();

            markerArray.then((marker) => console.log(marker));

            locationState.then((locations) => {
                locations.map((location) => {
                    const loc = new google.maps.LatLng(location.location.latitude, location.location.longitude);

                    path.push(loc);
                    bounds.extend(loc);

                    return google.map.fitBounds(bounds);
                });
            });
        }
    }

    return (
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'AIzaSyCHpeyXo9cKfdgjp-jfyRU52s70UB53D3E' }}
            defaultCenter={mapProps.center}
            defaultZoom={mapProps.zoom}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={handleGoogleMap}
        >
            { markerArray.length > 0 &&
                markerArray.map(location => (
                    <GoogleMapMaker
                        key={location.rowKey}
                        lat={location.location.latitude}
                        lng={location.location.longitude}
                    />
                ))
            }

        </GoogleMapReact>
    );
    export default GoogleMapsComponent;

1 Ответ

0 голосов
/ 28 января 2019

Google maps предлагает пару слушателей, вам нужно установить из этих

...