我正在從我的設備存盤中獲取資料并希望在地圖上顯示資料。但是當我this.coords.path在我的函式中更新我的狀態物件時，showPics()只{lat:1,lng:1}顯示測驗標記處，所有其他坐標都被推送到this.coords.path但不顯示......
我已經嘗試使用sampleData-array 來測驗基本代碼 -> 回圈并且一切正常 - 只是在使用新資料更新狀態物件時沒有......
這是代碼：
class Map extends React.Component {
constructor(props) {
super(props);
this.coords = {
path: [
{lat:1, lng:1}
]
}
}
showPics = async() => {
let {value} = await Storage.get({key: 'path' })
let arrayPath = JSON.parse(value)
for( let i=0; i < arrayPath.length; i ) {
let newArray = {lat: arrayPath[i].latitude, lng: arrayPath[i].longitude}
this.coords.path.push(newArray)
}
}
render() {
const sampleData = [{
"Id": 1,
"lat": 54.083336,
"lng: 12.108811
},
{
"Id": 2,
"lat": 54.084336,
"lng": 12.109811
}]
return (
<div className="leaflet-container">
<MapContainer id="map" center={center} zoom={zoom} scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{ this.coords.path.map(eachData => (
<Marker
position= {[eachData.lat, eachData.lng]}
/>
))}
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton onClick={() => this.showPics()}>
<IonIcon icon={image}></IonIcon>
</IonFabButton>
</IonFab>
</div>
)
}
}
uj5u.com熱心網友回復：
您正在嘗試將資料設定為this.coords. 這不會被 react 跟蹤，也無法更新 DOM。相反，您可以將資料設定為組件狀態，如下所示
state = {
coords: {
path: [
{lat:1, lng:1}
]
}
}
showPics可以如下修改函式以將資料設定為setState應由 virtualDOM 選取并相應更新的狀態
showPics = async() => {
const {coords:{path}} = this.state;
let {value} = await Storage.get({key: 'path' })
let arrayPath = JSON.parse(value);
const paths = [...path];
for( let i=0; i < arrayPath.length; i ) {
let newArray = {lat: arrayPath[i].latitude, lng:
arrayPath[i].longitude}
paths.push(newArray)
}
this.setState({
coords: {
path: [...paths]
}
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/314203.html
標籤：javascript 反应 离子框架 传单
上一篇：不支持SQL查詢連接？