Блог

Я не могу использовать состояние от родительского компонента к дочернему компоненту в компоненте Google Maps. Это может показаться очень простым вопросом, однако я пытаюсь понять разницу между тем, что один из реквизитов работает, а другой нет.

Итак, у меня есть компонент Google maps (импортируйте GoogleMapReact из ‘google-map-react’)

 static defaultProps = {
    center: { lat: 62.10281, lng: -84.14565 },
    zoom: 11
  };

  constructor(props) {
   console.log(props);       
    super(props);
  }

  render() {

      return (
        <div className='google-map' style={{ height: '100%', width: '100%' }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: 'somekey' }}
            center={this.props.center}
            defaultZoom={ this.props.zoom }>
            <AnyReactComponent
              lat={ this.props.lat }
              lng={ this.props.lng }
              text={ 'Wheres Waldo?' }
            />
          </GoogleMapReact>
        </div>
      )
  }
  

а затем из родительского компонента

 <MapComponent lat={this.state.latitude} lng={this.state.longitude}
                    center={{lat: this.state.latitude, lng: this.state.longitude}}
  

Я проверил значение lat, lng и center в конструкторе, и я получаю их, как и ожидалось, по-прежнему map не работает

Однако, если я жестко закодирую значение в центре, оставив широту, и lng получит значение из состояния, тогда это сработает.

Теперь это работает, может кто-нибудь, пожалуйста, объяснить эту концепцию, разницу и как ее преодолеть? Мы ценим вашу помощь.

 <MapComponent lat={this.state.latitude} lng={this.state.longitude}
                    center={{lat: 62.10281, lng: -84.14565}}