Question

如何解决此错误？

SimpleMap.js：35，Uncaught TypeError：无法读取属性'map' 未定义

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

但是不要复制并粘贴该代码，因为它不会起作用。它没有经过测试，我在没有看到您项目的全貌的情况下编写了它。这只是一个模糊的想法，但它应该给你一些东西。

如何修复“Uncaught TypeError：无法读取未定义的属性'map'”？

1 个答案: