第二次单击按钮后 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 (
)}
最佳答案
从你的状态来看,它似乎是一个类组件。
应该在回调中调用 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));
关于javascript - 在第二次单击状态尚未使用您添加的 newItem 更新后添加标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61490157/