MapBox 通过 props 设置多个标记 react答案

【问题标题】：MapBox setting multiple markers through props reactMapBox 通过 props 设置多个标记 react
【发布时间】：2020-11-01 19:34:52
【问题描述】：

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

【问题讨论】：

您是否尝试在componentDidMount() 中使用console.log(this.props.cats)？ map 未记录的一个可能原因是 cat 道具是空数组。
是的，我在渲染函数中做了，控制台记录了 6 只猫（哈哈）到控制台
cats: this.props.cats
但它会在componentDidMount函数中给你6只猫吗？甚至是 1 只猫？
啊知道它没有！它里面是一个空数组。

标签： javascript reactjs mapbox

【解决方案1】：

问题是你的猫在组件挂载时不可用，但稍后可用，这就是为什么它们出现在渲染中但在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
      }
}

【讨论】：