Question

第二次单击按钮后，地图上的

标记就会出现。为什么？从api下载数据。在this.state.items中，单击按钮后，将数据放置..

state = {
items:[]
}
handleFetch = () => {
    fetch('http://xxx)
      .then(resposne => {
        if (resposne.ok) {
          return resposne;
        }
        throw Error(resposne.status)
      })
      .then(response => response.json())
      .then(data =>
        this.setState({
          items: data,
        }))
      .catch(error => console.log(error))

    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,
    })

    for (var i = 0; i < this.state.items.length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }
  }
render() {
    <button onClick={this.handleFetch}>show markers</button>
    return (
)}

Answer 1

从您的状态来看，它似乎是一个类组件。

由于提取是异步的，因此应在回调中调用<div class="text-center mb-24">，以等待项设置之后再对其进行循环。

这是回调函数：

for loop

这是设置项目的最后一个const loopOverItems = () => { for (var i = 0; i < this.state.items.length; i++) { var obj = this.state.items[i]; let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y); new mapboxgl.Marker() .setLngLat(myLatlng) .addTo(map); } }：

then

在第二次点击状态尚未用您添加的newItem更新后添加标记？

1 个答案: