Я могу напечатать массив объектов состояния, но когда я пытаюсь получить доступ к значению из объекта в массиве, весь объект не определен

Question

Я новичок в React и пытаюсь добавить список маркеров в компонент карты Google, используя библиотеку google-map-react.

Что я сделал до сих пор:

1. Извлеченные данные объекта из моего API

2. Хранит каждый объект в массиве 'маркеров' в состоянии компонента со следующей структурой

[
  {
   "id":1,
   "lat":123.123,
   "lng":23.13,
   "color":"red"
   },{
   "id":11,
   "lat":53.274,
   "lng":-6.25,
   "color":"red"
  }
]

Теперь я пытаюсь получить доступ к массиву маркеров из JSX, к которому я могу нормально получить доступ, используя this.state.markers или this.state.markers[0], но всякий раз, когда я пытаюсь получить доступ к значению, хранящемуся в одном из объектов массива, с помощью this.state.markers[0].id, это выглядит как undefined.

Здесь this.state.markers[1] работает нормально

Раскомментируя this.state.markers[1].id ломает его

Инструменты React Dev, показывающие значения состояния

Полный код:

class GoogleMap extends Component {
  static defaultProps = {
    center: {
      lat: 53.35,
      lng: -6.26
    },
    zoom: 13,

  };

  state = {
    markers: [

    ]
  };

  async componentDidMount(){
    const url = "/api/crime/all";
    const response = await fetch(url);
    const data = await response.json();
    console.log(data)

    //Create a copy of the current markers array
    var newMarkers = this.state.markers.slice();
    for(var i = 0; i < data.length ; i++){
      console.log(data[i].id)
      var marker = {
        id: data[i].id,
        lat: data[i].latitude,
        lng: data[i].longitude,
        color: "red"
      }
      //Push each object to the array
      newMarkers.push(marker);
    }

    // Update the state with the new array
    this.setState({markers: newMarkers});

  }
  render() {

    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: "AIzaSyA7qsNPuWR4K4RncWMv1sFfxUIJG-7zOh0" }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
          options={createMapOptions}  
        >

          {/* Here Im trying to access the array from the jsx */}
          {console.log("Markers        "+ JSON.stringify(this.state.markers))}
          {console.log("Markers[0]     "+ JSON.stringify(this.state.markers[0]))}
          {console.log("Markers[1]     "+ JSON.stringify(this.state.markers[1]))}

          /*The below line is what causes the error (Cannot access id of undefined)*/
          {/* {console.log("Markers[1].id  "+ JSON.stringify(this.state.markers[1].id))} */}



          {/* Some hardcoded Markers for now */}
          <Marker
          id={1}
          lat={53.352}
          lng={-6.264}
          color="green"
          />
          <Marker
          id={2}
          lat={53.3512}
          lng={-6.26234}
          color="red"
          />
          <Marker
          id={3}
          lat={53.354}
          lng={-6.2632}
          color="orange"
          />

        </GoogleMapReact>
      </div>
    );
  }
}

export default GoogleMap;

Заранее благодарен за любую помощь!

Answer 1

Ваши данные не были получены при первом рендере, поэтому все, что у вас есть, это ваши значения по умолчанию.

markers по умолчанию установлен в пустой массив, поэтому вы можете получить к нему доступ нормально. Доступ к markers[x] вернет undefined, что тоже приемлемо. При доступе к markers[x].property неопределенный объект обрабатывается так, как если бы он был объектом, который сломается.

Перед тем, как пытаться получить к нему доступ, проверьте, закончили ли загружаться ваши данные.

Это можно сделать с помощью условное отображение всего компонента:

if (this.state.markers.length > 0) {
  return // your components
} else {
  return null // or whatever else you choose
}

Или вы можете просто проверить, существует ли он, прежде чем получить к нему доступ.