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

Question

第二次单击按钮后 map 上会出现标记。为什么？从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

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

应该在回调中调用 for 循环，以等待在循环之前设置的项目，因为获取是异步的。

这是回调函数:

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:

.then(data => this.setState({items: data}, loopOverItems));