时间戳

首页 > 解决方案 > MapBox 通过 props 设置多个标记 react

javascript - MapBox 通过 props 设置多个标记 react

问题描述

我有一个地图框反应组件，它通过带有 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);
});

}

代码的注释掉部分会根据教程添加一个地图标记。

但是，在下面的代码中，我试图通过我的 cat props 对象进行映射以添加多个标记，但是 console.log('test'); 没有出现在控制台中，所以我一定做错了什么。

我做了一些 React 已经有一段时间了，请指出我正确的方向？！:)

固定的：

this.props.cats 在 componentDidMount() 中是空的，所以我将代码移到了 componentWillReceiveProps() 中，它修复了它！:)

标签： javascriptreactjsmapbox

解决方案

问题是您的猫在组件安装时不可用，但稍后可用，这就是为什么它们出现在渲染中但在componentDidMount.

您需要在您的猫可用后添加您的标记。您可以移动您的逻辑以添加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
      }
}

推荐阅读