Google-maps-реакции: значение реквизита, переданного родительским компонентом

Question

Я создавал небольшой проект, использующий реагирование с картой Google, и использовал библиотеку google-maps-реакции .

Проблема возникает всякий раз, когда я получаю данные с сервера и извлекаю широтуи информацию о долготе и передайте их дочернему компоненту, который равен HandleGoogleMap как props, и установите их как initialCenter, карта отображает местоположение с latitude:0 и longitude:0.

Однако, когда я изменяю значение initialCenter как просто числа, оно корректно отображает местоположение.Но я также записал реквизиты широты и долготы, чтобы убедиться, что это числа.Вот код:

const HandleGoogleMap = props => {
  const { lat, lng } = props;

  // lat contains information of latitude
  // lng contains infromation of longitude

  console.log(lat);
  console.log(lng);

  return (
    <Map
      google={props.google}
      // when I change the value of lat and lng properties as numbers, it renders correctly 
      //but when I set values as props that the component passed by parent component, 
      //map renders lat: 0, lng:0 location
      initialCenter={{ lat: lat, lng: lng }}
      zoom={12}
    />
  );
};

export default GoogleApiWrapper({
  apiKey: "141423124123123123"
})(HandleGoogleMap);

Answer 1

Проблема в том, что реквизит не загружен, вот как это работает.используйте props.loaded, а затем google={props.google}, как показано ниже:

const HandleGoogleMap = props => {
  if (!props.loaded) return <div>Loading...</div>;


  return (
    <Map
      google={props.google}
      // when I change the value of lat and lng properties as numbers, it renders correctly 
      //but when I set values as props that the component passed by parent component, 
      google={props.google}
      zoom={12}
    />
  );
};

export default GoogleApiWrapper({
  apiKey: "141423124123123123"
})(HandleGoogleMap);

Answer 2

Я думаю, что проблема в асинхронном характере извлечения lat / lng из API.Вы используете initialCenter с этими значениями, которые могут быть проблемой.

initalCenter: принимает объект, содержащий координаты широты и долготы.Устанавливает центр карты при загрузке.

center: берет объект, содержащий координаты широты и долготы.Используйте это, если вы хотите повторно визуализировать карту после первоначального рендеринга.

Используйте вместо этого свойство "center" для данных, поступающих из API, поскольку действие асинхронно, и вам потребуется повторно-отобразить карту после получения данных

<Map
  google={props.google}
  center={{ lat: lat, lng: lng }}
  zoom={12}
/>