为啥使用默认的 React Google Maps 得到“TypeError：无法将类调用为函数”？

Posted 2023-02-23

【中文标题】为啥使用默认的 React Google Maps 得到“TypeError：无法将类调用为函数”？

【英文标题】：Why using the default React Google Maps getting "TypeError: Cannot call a class as a function"?为什么使用默认的 React Google Maps 得到“TypeError：无法将类调用为函数”？

【发布时间】：2021-02-26 10:46:17

【问题描述】：

几乎使用谷歌地图的默认 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)  

我找不到这个问题。有人可以建议吗？

【问题讨论】：

嘿@YoungDad，你有完整的堆栈跟踪可以分享吗？

我添加了浏览器，它抱怨 React.Component，虽然我有这个。来自节点模块的地图有export class Map extends React.Component<IMapProps, any>

【参考方案1】：

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