问题描述
就我之前的question而言，
我正在以特定的时间间隔查看地图上的渲染标记，例如 10 秒或 20 秒。
下面是代码...
{
setInterval(() => {
this.tmcount += 1;
console.log(this.tmcount);
console.log(this.state.geoData[this.tmcount]);
return (
<Marker key={this.tmcount} position={[this.state.geoData[this.tmcount].lat,this.state.geoData[this.tmcount].lng]}>
<Popup>
{this.tmcount} Hi!!!
</Popup>
</Marker>
)
},1000)
}
我用上面的方法试过，但没有渲染..
解决方法
您的问题需要大量工作。我不知道这个 setInterval 在哪里运行，或者你的实际地图组件在哪里。话虽如此，您需要以不同的方式思考这一点。您希望您的地图定期更新，这意味着您需要有一些状态变量来跟踪正在更新的内容，并且地图应该做出相应的响应。让我们设置一个组件，它在其状态中有一个标记数组，以及一个在任何给定时间呈现该数组中内容的地图：
const MapComponent = () => {
const [markers,setMarkers] = useState([]) // start with nothing
return (
<MapContainer center={center} zoom={zoom}>
{markers.map((marker,index) => {
const key = {index} // bad idea here
const {lat,lng} = marker
return <Marker key ={} position={} />
})}
</MapContainer>
)
}
最初，您将没有标记，因为您的状态变量是一个空数组。但是您的组件希望如果有标记，则它们将在该数组中的每个条目上具有 .lat 和 .lng 属性。现在，假设您有一些数据源，它是一个包含位置信息的对象数组，您可以设置一个 useEffect 以使用该数据集中的新条目逐步更新您的状态变量：
const [markers,setMarkers] = useState([])
useEffect(() => {
const interval = setInterval(() => {
// clone state variable
const updatedMarkers = [...markers]
// add next marker entry from source dataset
updatedMarkers.push(geoData[markers.length])
// setMarkers(updatedMarkers)
},1000) // 1 second interval
return () => { clearInterval(interval) } // clean up interval on unmount
},[])
return ( ... )
所以现在，在组件安装时，设置了一个计时器，以使用源数据中的下一个条目每秒更新状态。地图将做出同样的反应，并每秒添加下一个标记。我还没有测试过这个，但希望它足以让你知道该怎么做。