Сопоставление состояния в React-Leaflet

Я застрял, пытаясь отобразить состояние в моем проекте 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: Cannot read property 'lat' of null"

reactjs leaflet mapping react-leaflet

30.06.2019 09:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

261

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

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

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

Демо

30.06.2019 16:37

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

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

01.07.2019 09:04

Другие вопросы по теме

Блестящие этикетки для листовок в зависимости от уровня масштабирования

Центрирование маркера в центре div

Какая библиотека листовок или обходной путь для управления размером панели инструментов

Вывод листовки на двух вкладках: LeafletProxy() изначально не отображается на второй вкладке

Карта листовки Jquery со значками на основе данных json продолжает показывать неопределенное значение

Реализация плагина (javascript) в R Leaflet

Как использовать уникальный PNG для нескольких плиток?

Лифлет рисует многоугольник на карте загрузки

OnEachFeature не вызывается

Импорт свойств маркеров из, например. текстовый файл?

Сопоставление состояния в React-Leaflet

Ответы 2

Другие вопросы по теме

Похожие вопросы