Reactjs가 새 위치로 Google지도를 다시로드 할 수 없습니다.

Question

새로 입력 한 위치로 Google지도를 다시로드하려고하는데 다시로드하지 않습니다. lat 및 lng의 올바른 값이 SearchBar 구성 요소에서 다시 전달되고 상태가 올바르게 업데이트됩니다. 나는 react-google-maps에 익숙하지 않기 때문에지도를 업데이트하는 또 다른 방법이 있는지 확실하지 않습니다. 상태를 업데이트하고 나면 Google지도가 다시 렌더링되지만 그럴 수는 없다고 생각했습니다.

1. 하는 index.js

   import React, { Component }from 'react'; 
   import ReactDOM from 'react-dom'; 
   import Map from './components/map'; 
   import SearchBar from './components/search_bar' 
   import './index.css'; 
   
   class App extends Component { 
       constructor(props) { 
       super(props); 
   
       this.state = { center: {lat: 37.7547339, lng: -122.4744468 }} 
   
       } 
   
       locationSearch(term) { 
       this.setState({center: JSON.stringify(term)}); 
       } 
   
       render() { 
       return (
        <div> 
        <div className="row"> 
         <div className="sidebar col-md-3"> 
         <SearchBar 
          onSearchTermChange={this.locationSearch.bind(this)} 
          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" 
          loadingElement={<div style={{ height: `100%` }} />} 
          containerElement={<div style={{height: '400px'}} />} /> 
         </div> 
         <div className="col-md-9"> 
         <Map 
          center={this.state.center} 
          zoom={14} 
          containerElement={<div style={{height:'400px'}} />} 
          mapElement={<div style={{height:100 + '%'}} />} /> 
         </div> 
        </div> 
        </div> 
       ); 
       } 
   } 
   
   ReactDOM.render(<App />, document.querySelector('.container')); 
   

2. search_bar.js

   import React, { Component } from 'react'; 
   import { withScriptjs } from 'react-google-maps'; 
   import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox"; 
   import _ from 'lodash'; 
   /*global google*/ 
   class SearchBar extends Component { 
       constructor(props) { 
       super(props); 
       this.refs = {}; 
       this.state = { center: {lat:38.5382322, lng:-121.7639065 }}; 
       } 
   
       onSearchBoxMounted(ref) { 
       this.searchBox = ref; 
       } 
       bounds() { 
       console.log("bounds"); 
       } 
       onPlacesChanged() { 
       const places = this.searchBox.getPlaces(); 
       const bounds = new google.maps.LatLngBounds(); 
   
       places.forEach(place => { 
        if (place.geometry.viewport) { 
        bounds.union(place.geometry.viewport) 
        } else { 
        bounds.extend(place.geometry.location) 
        } 
       }); 
   
       const nextMarkers = places.map(place => ({ 
        position: place.geometry.location, 
       })); 
   
       const nextCenter = _.get(nextMarkers, '0.position', this.state.center); 
   
       this.setState({ 
        center: nextCenter 
       }); 
   
       this.props.onSearchTermChange(this.state.center); 
       } 
   
       render() { 
       return(
        <StandaloneSearchBox 
        ref={this.onSearchBoxMounted.bind(this)} 
        bounds={this.bounds.bind(this)} 
        onPlacesChanged={this.onPlacesChanged.bind(this)}> 
        <input 
         type="text" 
         placeholder="Search for restrooms" 
         style={{ 
         boxSizing: `border-box`, 
         border: `1px solid transparent`, 
         width: `240px`, 
         height: `32px`, 
         padding: `0 12px`, 
         borderRadius: `3px`, 
         boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`, 
         fontSize: `14px`, 
         outline: `none`, 
         textOverflow: `ellipses`, 
         }} /> 
        </StandaloneSearchBox> 
       ); 
       } 
   } 
   
   export default withScriptjs(SearchBar); 
   

3. map.js

   import React, { Component } from 'react'; 
   import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; 
   
   class Map extends Component { 
       constructor() { 
       super(); 
       this.state = { 
        map: null 
       } 
       } 
   
       mapMoved() { 
       console.log('mapMoved: '+ JSON.stringify(this.state.map.getCenter())); 
       } 
   
       mapLoaded(map) { 
       if(this.state.map !== null) { 
        return; 
       } 
   
       console.log("here: " + JSON.stringify(this.props.center)); 
   
       this.setState({ 
        map: map 
       }); 
       } 
   
       render() { 
       const markers = this.props.markers || [] 
       console.log("reload"); 
       return (
        <GoogleMap 
         ref={this.mapLoaded.bind(this)} 
         onDragEnd={this.mapMoved.bind(this)} 
         defaultZoom={this.props.zoom} 
         defaultCenter={this.props.center}> 
         {markers.map((marker, index) => (
          <Marker {...marker} /> 
         ) 
        )} 
        </GoogleMap> 
       ); 
       } 
   } 
   
   export default withGoogleMap(Map) 
   

Answer 1

그냥 빠른 모양을 기반으로, 난 아마도 Map 클래스에 componentWillReceiveProps()를 추가하고 lat 및 lng의 업데이트 된 값을 가지고 setState()를 사용하여 this.state.map을 업데이트해야한다고 생각합니다.