Отображение состояния в React-Leaflet - PullRequest
Новая
       34

Отображение состояния в React-Leaflet

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

Как дела? Мне нужна ваша помощь! Я застрял, пытаясь отобразить состояние в моем проекте React-Leaflet. Усталый, измученный. Надеюсь, кто-нибудь поможет мне. Вот мое состояние и что я делаю, чтобы получить маркер на моей карте. 

this.state = {
   markers: [
       {
          _id: 'SomeId',
          position:[51.509,-0.03],
          content: 'Something'}
       }
   ]      
}


{this.state.markers.map((position, _id, content) => 
       <Marker 
       key={_id} 
       position={position}>
       <Popup>
         <span>{content}</span>       
       </Popup>
     </Marker>
)}

Что бы я ни делал, я получаю

"Uncaught TypeError: Невозможно прочитать свойство 'lat' of null"

Ответы [ 2 ]

0 голосов
/ 01 июля 2019

Функция обратного вызова принимает 3 аргумента, и первый аргумент является текущей записью в массиве. Необходимые свойства должны быть доступны через него. 

{this.state.markers.map(marker =>
  <Marker key={marker._id} position={marker.position}>
    <Popup>
      <span> <br/> {marker.content}</span> 
    </Popup>  
  </Marker> 
)}
0 голосов
/ 30 июня 2019

Вероятно, ошибка генерируется другой частью вашего кода, потому что в том, что вы включили, нет свойства lat ни одного объекта.

Таким образом, чтобы визуализировать маркер из массива объектов, хранящихся в состоянии, вы должны деструктурировать свойства объекта внутри массива маркеров при цикле с картой, чтобы использовать их напрямую: 

{this.state.markers.map(({position, _id, content}) => 
       <Marker
            key={_id}
            position={position}
            icon={customMarker}>
            <Popup>
              {content}
            </Popup>
       </Marker>)
}

Демо

...