为什么使用默认的 React 谷歌地图会"TypeError: Cannot call a class as a function"？

Question

使用谷歌地图的几乎默认npm模板，我得到了错误，不能将类作为函数调用。我读过的地方，都缺少extends Component部分，尽管我有

import React, { Component } from "react";
import { Map, GoogleApiWrapper } from "google-maps-react";
const mapStyles = {
width: "100%",
height: "100%",
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false, // Hides or shows the InfoWindow
activeMarker: {}, // Shows the active marker upon click
selectedPlace: {}, // Shows the InfoWindow to the selected place upon a marker
};
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true,
});
onClose = (props) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null,
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: -1.2884,
lng: 36.8233,
}}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: "API KEY",
})(MapContainer);

一旦我导入并使用它，我就会得到：

import { MapContainer } from "./submitMap";

浏览器错误：

Warning: The <Map /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change Map to extend React.Component instead.
at Map (http://localhost:3000/static/js/0.chunk.js:2080:7)
at MapContainer (http://localhost:3000/static/js/main.chunk.js:13540:5)  

我找不到这个问题。有人能提出建议吗？

Answer 1

您的浏览器错误似乎希望Map组件具有extend React.Component，并且您似乎直接在渲染中返回Map。如果你想做到这一点，你必须进入Map组件并对其进行编辑，以扩展React.Component