反应传单未显示更新状态

Question

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

Answer 1

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