react leaflet not showing updated state-CodePudding

I am fetching data from my device storage and want to display the data on a map. But when I update my state object this.coords.path inside my function showPics() only the testing marker at {lat:1,lng:1} is displayed all the other coordinates are pushed to this.coords.path but not displayed...

I have tried it with the sampleData-array for testing the basic code -> the loop and everything works - just not when updating the state object with new data...

Here is the code:

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='&copy; <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>
      )
  
    }
  }

CodePudding user response：

You are trying to set the data to this.coords. This is not tracked by react and will not be able to update the DOM. Instead you can set your data to the component state as below

state = {
   coords: {
    path: [
        {lat:1, lng:1}
    ]
  }
}

Function showPics can be modified as below to set the data to the state using setState which should be picked by the virtualDOM and update accordingly

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]
       }
    })
}