ReactJSコンパイルに失敗しました： 'オブジェクト'が定義されていませんno-undef

Question

コードにないものを教えてもらえますか？私は

（reactJSで初心者）... Googleマップマーカーに

目的は、すべてのオブジェクトを取得することです....夫婦の時間とエラー後のエラーのためにこれを行うために座標をしようとしている

class maps extends Component{ 

    constructor(props){ 
     super(props) 

     this.state = { Objects: [] } 
    } 

render(){ 

    {this.state.Objects.location.coordinates.map((item, i) => (
    <Marker position= {{ lat: Objects[i].location.coodinates[0], lng: Objects[i].location.coordinates[1] }}/> 
    ))} 

    const MyMapComponent = withScriptjs(withGoogleMap((props) => 

    <GoogleMap 
     defaultZoom={2} 
     defaultCenter={{ lat: 40.6333333, lng: -8.65 }} 
    > 

    </GoogleMap> 
)) 

    return(
     <div> 
     <MyMapComponent 
     isMarkerShown 
     googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnQmNcHpzoytzm02Zf-inD6xxTdSRJdLg&v=3.exp&libraries=geometry,drawing,places" 
     loadingElement={<div style={{ height: `100%` }} />} 
     containerElement={<div style={{ height: `400px` }} />} 
     mapElement={<div style={{ height: `100%` }} />} 
     /> 
     </div> 
    ) 
} 

componentDidMount(){ 

       axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu').then(response => { 

        const { Objects } = response.data 
        console.log(Objects) 
        this.setState({Objects}) 

       })  
       .catch(error => { 
        console.log('Error fetching and parsing data', error); 
       }); 

      } 

}

These are the objects.coordinates from api data that I need to fetch

任意のヒントが理解されるであろう。どうもありがとう！

Answer 1

これは間違っている：あなたはthis.state.Objects.location.coordinatesの上にマッピングされているので、

{this.state.Objects.location.coordinates.map((item, i) => (
    <Marker position= {{ lat: Objects[i].location.coodinates[0], lng: Objects[i].location.coordinates[1] }}/> 
))} 

、あなたはオブジェクトにアクセスするためにインデックスを使用している[i]が.location.coodinates [0]およびオブジェクト[i] .location.coordinates [1]およびオブジェクトは定義されていませんが、this.state.Objectsはです。

私はあなたがこのような何かを意味推測している：

{this.state.Objects.map((item, i) => (
     <Marker position= {{ lat: item.location.coodinates[0], lng: item.location.coordinates[1] }}/> 
    ))} 

ここでは、各オブジェクトの緯度/経度一覧表示する方法の例です：http://jsfiddle.net/g4hr5jnc/

あなただけのGoogleマップコンポーネントと交換

Answer 2

私はコードがconstructor(props)を最初に実行し、次にrender()を実行し、次にcomponentDidMount()を実行することが問題だと思います。したがって、render()を実行すると、this.state.Objectsはまだ空の配列です。 componentDidMount()でcomponentDidMount()

についてもっとcomponentWillMount()に変更
にしては、コンポーネントのライフサイクル反応するものは何でも
1.書き込み：
あなたは試したいことがあり最初は
http://busypeoples.github.io/post/react-component-lifecycle/