MapBox устанавливает несколько маркеров через props React - PullRequest
Новая
       30

MapBox устанавливает несколько маркеров через props React

0 голосов
/ 12 июля 2020

У меня есть компонент реакции окна карты, который принимает объект кошек через реквизиты с координатами lng и lat. 

<MapContainer cats={cats} /> ----- This is component below


componentDidMount() {

const map = new mapboxgl.Map({
  container: this.mapContainer,
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [this.state.lng, this.state.lat],
  zoom: this.state.zoom
});

map.on('move', () => {
  this.setState({
    lng: map.getCenter().lng.toFixed(4),
    lat: map.getCenter().lat.toFixed(4),
    zoom: map.getZoom().toFixed(2)
  });
});

//var marker = new mapboxgl.Marker()
//.setLngLat([12.550343, 55.665957])
//.addTo(map);

this.props.cats.map((cat) => {
console.log('test');
  var marker = new mapboxgl.Marker()
  .setLngLat([cat.lat, cat.lng])
  .addTo(this.map);
});

}

Закомментированный раздел кода добавляет штраф маркера карты из-за следования руководству.

Однако в приведенном ниже коде я пытаюсь сопоставить мой объект реквизита кошки, чтобы добавить несколько маркеров, но console.log ('test'); не отображается в консоли, поэтому я, должно быть, делаю что-то не так.

Прошло много времени с тех пор, как я использовал React, пожалуйста, укажите мне правильное направление ?! :)

Исправлено:

this.props.cats был пуст внутри componentDidMount (), поэтому я переместил код внутри componentWillReceiveProps (), который исправил его! :)

1 Ответ

0 голосов
/ 12 июля 2020

Проблема в том, что ваши кошки недоступны при монтировании компонентов, но доступны позже, поэтому они появляются при рендеринге, но пустой массив доступен во время componentDidMount.

Вам необходимо добавить маркер после того, как ваши кошки будут доступны. Вы можете переместить свой logi c, чтобы добавить хук жизненного цикла componentDidUpdate() и добавить проверку, как показано ниже. 

componentDidUpdate(prevProps) {
  // Handle your condition here, something like below
  // Make sure to add a condition to run only when required, because componentDidUpdate will run each time prop or state has changed.
  if(this.props.cat.length > 0 && this.props.cat !== prevProps.cat ) {
    // Your marker logic
      }
}
...