Estoy obteniendo datos del almacenamiento de mi dispositivo y quiero mostrar los datos en un mapa. Pero cuando actualizo mi objeto de estado this.coords.path dentro de mi función showPics() solo se muestra el marcador de prueba en {lat:1,lng:1} todas las demás coordenadas se envían a this.coords.path pero no se muestran. ..
Lo probé con sampleData -array para probar el código básico -> el bucle y todo funciona, pero no cuando actualizo el objeto de estado con nuevos datos...
Aquí está el código:
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> ) } }Está intentando establecer los datos en this.coords . Esto no es rastreado por reaccionar y no podrá actualizar el DOM. En su lugar, puede configurar sus datos en el estado del componente como se muestra a continuación
state = { coords: { path: [ {lat:1, lng:1} ] } } La función showPics se puede modificar como se muestra a continuación para establecer los datos en el estado usando setState , que debe ser seleccionado por virtualDOM y actualizado en consecuencia
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] } }) }