循环状态并创建多个组件

Question

我试图在地图上显示(车辆的(位置坐标，每3秒获取一次数据。每次我获取数据(属性为"经度"one_answers"纬度"的对象阵列(时，状态都会更新，我想更新地图上的"标记"，以反映车辆的最新位置。

我知道我正在获取数据，但标记没有显示。我循环的方式有问题吗？

class Mapbox extends Component {
constructor(props){
super(props)
this.state = {
active_vehicles: {},
};
}
componentDidMount() {
this.interval = setInterval(() => this.fetchData(), 3000);
}
componentWillUnmount() {
clearInterval(this.interval);
}

fetchData = async () => {
let url = `${request_url}`
const response = await fetch(url, {
method: "GET",
headers: {
"Accept": "application/json",
}
});
const body = await response.json()
this.setState({ active_vehicles: body })
}
createMarkers = () => {
let markers = []
if(this.state.active_vehicles){
for (let i = 0; i < this.state.active_vehicles.length; i++) {
markers.push(
<Marker latitude={this.state.active_vehicles[i]["Latitude"]} longitude={this.state.active_vehicles[i]["Longitude"]}>
<div>x</div>
</Marker>
)
}
return markers
}
}
render() {
return (
<ReactMapGL
// mapbox API access token
mapboxApiAccessToken={MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v9"
{...this.state.viewport}
onViewportChange={(viewport) => this.setState({viewport})}>
<div>
{this.createMarkers()}
</div>
</ReactMapGL>
);
}
}

Answer 1

1. 将this.active_vehicles更正为this.state.active_vehicles(OP已在我发布评论后更正(
2. 将key属性添加到for循环内的Marker组件：<Maker key={i} ...