Слушатель событий Google Maps в приложении React не вызывается? - PullRequest
Новая
       3

Слушатель событий Google Maps в приложении React не вызывается?

0 голосов
/ 05 июня 2019

Я работаю над приложением React, которое должно в конечном итоге позволить пользователям привязывать карты;Я развернул то, что у меня есть, до https://codesandbox.io/s/github/khpeek/overlayr. Я адаптировал код из https://codesandbox.io/s/lx947qjv0z, и у меня есть несколько вопросов по поводу исходного кода.

Мой вопрос о events реквизит, который передается компоненту Map: 

import React, { useEffect } from "react";
import useGoogleMap from "../hooks/useGoogleMap";

export default function Map({ center, zoom, children, events }) {
  const { maps, map, mapRef, loading } = useGoogleMap({ zoom, center, events });

  useEffect(
    () => {
      map && map.panTo(center);
    },
    [center.lat, center.lng]
  );

  return (
    <div className="map-container">
      <div ref={mapRef} className="map-ref" />
      {!loading &&
        React.Children.map(children, child => {
          return React.cloneElement(child, { map, maps });
        })}
    </div>
  );
}

В App.js компонент Map используется следующим образом: 

import React, { useState } from 'react';
import './App.css';
import Map from './components/Map'
import GroundOverlay from './components/GroundOverlay';

function App() {
  const [bounds, setBounds] = useState({});

  return (
    <div className="App">
      <Map
        zoom={12}
        center={{ lat: 40.740, lng: -74.18 }}
        events={{ onBoundsChanged: arg => setBounds(arg) }}
      >
        <GroundOverlay
          url='https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
          bounds={{
            north: 40.773941,
            south: 40.712216,
            east: -74.12544,
            west: -74.22655
          }}
          opacity={0.5}/>
      </Map>
    </div>
  );
}

export default App;

В useGoogleMap custom hook, events используется для добавления слушателей к объекту map: 

import { useEffect, useState, useRef } from "react";
import GoogleMapsApiLoader from "google-maps-api-loader";

const apiKey = "AIzaSyCVBthtEmWi0Ul8mejDQrBlOULXB1kTB3I";

const eventsMapping = {
  onCenterChanged: ["center_changed", map => map.getCenter()],
  onBoundsChanged: ["bounds_changed", map => map.getBounds()]
};

export default function useGoogleMap({ zoom, center, events }) {
  const [mapState, setMapState] = useState({ loading: true });
  const mapRef = useRef();
  useEffect(() => {
    GoogleMapsApiLoader({ apiKey }).then(google => {
      const map = new google.maps.Map(mapRef.current, { zoom, center });

      Object.keys(events).forEach(eventName =>
        map.addListener(eventsMapping[eventName][0], () =>
          events[eventName](eventsMapping[eventName][1](map))
        )
      );

      setMapState({ maps: google.maps, map, loading: false });
    });
  }, []);
  return { mapRef, ...mapState };
}

Так что, как я понимаю, в этом случае этот код должен делать 

map.addListener('bounds_changed', setBounds(map.getBounds()))

В таком случае я ожидаю, что переменная состояния bounds компонента App должна обновляться всякий раз, когда я перетаскиваю карту.

Однако это не то, что я наблюдаю в Reactинструменты отладчика.Там состояние компонента App выглядит пустым:

enter image description here

Короче, мне не ясно, что такое eventsреквизит Map компонента на самом деле?Почему я не вижу bounds в состоянии компонента App?

Обновление

Кажется, что 'Hooks' -> 'State' в инструментах отладчика React делаетна самом деле представляют собой состояние bounds.Однако остается вопрос: почему он продолжает отображать пустой объект, а границы не меняются, когда я перетаскиваю карту?

...