Карта response-google-maps не обновляется при прохождении реквизита, а маркер на момент отставания при обновлении - PullRequest
Новая
       33

Карта response-google-maps не обновляется при прохождении реквизита, а маркер на момент отставания при обновлении

1 голос
/ 11 апреля 2019

У меня карта работает, когда она загружается, но всякий раз, когда я прохожу реквизит, сама карта никогда не меняется.

Маркер меняется, но всегда на 1 состояние позади того, что должно быть, очевидно, это проблема синхронизации, но я не уверен, как это исправить в моем компоненте. 

class Map extends React.Component {
  state = {
     center: { lat: 50.937531, lng: 6.960278600000038 }
  }

  componentWillReceiveProps = () => {
    this.setState({
      center: { 
        lat: Number(parseFloat(this.props.city.lat)),
        lng: Number(parseFloat(this.props.city.lng))
      }
    });
  }

  render() {
    console.log(this.state.center)
    return (
      <div>
        <MapDetails
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-L-IikkM6BZ_3Z2QIzbkx4pdAkP76tok&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `100vh`}} />}
          mapElement={<div style={{ height: `100%` }} />}
          mapCenter={this.state.center}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { city: state.CityNameReducer }
}

export default connect(mapStateToProps)(Map);

const MapDetails = withScriptjs(withGoogleMap(props =>
  <GoogleMap
    defaultZoom={12}
    defaultCenter={props.mapCenter}
  >
    <Marker
      position={props.mapCenter}
    />
  </GoogleMap>
));

Самый большой вопрос, который у меня возникает, - почему сама карта не обновляется?

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Добавить ключ к компоненту GoogleMap. Ключ должен быть уникальным каждый раз при условии. для тестирования используйте новую функцию Date (). getTime (). 

<GoogleMap key={new Date().getTime()}/>

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

0 голосов
/ 11 апреля 2019

Я могу порекомендовать вам использовать shouldComponentUpdate (nextProps, nextState) {} вместо componentWillReceiveProps ().

Рекомендую прочитать следующую страницу, чтобы понять, как она работает. Обновление и компонент WillReceiveProps

У меня нет больше информации о том, что происходит в родительском компоненте вашего компонента, поэтому я не могу углубиться в проблему. Но я думаю, что вы можете получить решение, изменив это.

...