"Uncaught TypeError：未定義のプロパティ 'map'を読み取れません。

Question

このエラーを修正するにはどうすればよいですか？

SimpleMap.js:35, Uncaught TypeError: Cannot read property 'map' of undefined

import React from "react"; 
    import {GoogleMapLoader, GoogleMap, Marker} from "react-google-  maps"; 

    export default function SimpleMap (props) { 

    var markers = [{ 
     position: 
     { lat: -34.397, lng: 150.644 } 
     , 
     index: "1" 
    }]; 
return (

    <section style={{height: "100%"}}> 
     <GoogleMapLoader 
      query={{ libraries: "geometry,drawing,places,visualization" }} 
      containerElement={ 
     <div 
     {...props.containerElementProps} 
     style={{ 
      height: "100%", 
     }} 
     /> 

    } 


      googleMapElement={ 
     <GoogleMap 
     ref={(map) => console.log(map)} 
     defaultZoom={3} 
     defaultCenter={{ lat: -25.363882, lng: 131.044922 }} 
     onClick={props.onMapClick} 
     > 
     {props.markers.map((marker) => { 
      return (
      <Marker 
       {...marker} 
       onRightclick={() => props.onMarkerRightclick(index)} /> 
     ); 
     })} 
     </GoogleMap> 
    } 
      ></GoogleMapLoader> 
    </section> 
); 

} 

Answer 1

それは問題が何であるかを伝えることは本当に難しいです。コードに多くのエラーがあり、 投稿したスニペットから画像全体が見えません。本当に、JavaScriptエラーをすべて追跡するまで、デバッグする方法を学ばなければなりません。それはたくさんの仕事ですが、私はあなたのためにそれをすることはできません。 いくつかの方向性を与えるためには、コードはこのように見えるのが理想です。

import React, {Component} from 'react'; 
import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps"; 

export default class SimpleMap extends Component { 
    var { markers, containerElementProps, onMapClick, onMarkerRightClick } = this.props; 
    markers = [{ 
    position: { lat: -34.397, lng: 150.644 }, 
    index: "1" 
    }]; 
    var containerEl = <div {...containerElementProps} />; 
    var mapEl = <GoogleMap 
    defaultZoom={3} 
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }} 
    onClick={onMapClick} 
    > 
    {markers.map((marker) => { 
     return (<Marker {...marker} onRightclick={onMarkerRightClick} />); 
    })} 
    </GoogleMap>; 
    return (
    <section> 
     <GoogleMapLoader 
     query={{ libraries: "geometry,drawing,places,visualization" }} 
     containerElement={containerEl} 
     googleMapElement={mapEL} 
     /> 
    </section> 
); 
} 

次に、このようなコンポーネントを使用します。

import { SimpleMap } from './path/to/component'; 
... 
// Inside your render function 
<SimpleMap markers={yourMarkers} containerElementProps={this.props} onMapClick={yourOnMapClickFunction} onMarkerRightClick={yourOnMarkerRightClickFunction} /> 

しかし、それが機能しないので、そのコードをコピーして貼り付けないでください。それはテストされておらず、私はあなたのプロジェクトの全体像を見ることなくそれを書きました。それは単なる漠然とした考えですが、あなたに何かを与えるべきです。