在我的 React 项目中获取“不能将类作为函数调用”

javascript ecmascript-6 reactjs react-router google-maps

2022-08-30 02:37:52

我正在尝试将 React 映射组件添加到我的项目中，但遇到错误。我正在使用Fullstack React的博客文章作为参考。我追踪了第83行google_map.js错误的位置：

function _classCallCheck(instance, Constructor) { 
  if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); 
    } 
  }

这是到目前为止我的地图组件。当我注释掉第58-60行，最后三行时，页面加载得很好（没有地图）。编辑：我做了@Dmitriy Nevzorov建议的更改，它仍然给了我同样的错误。

import React from 'react'
import GoogleApiComponent from 'google-map-react'

export class LocationsContainer extends React.Component {
    constructor() {
        super()
    }
  render() {
    const style = {
        width: '100vw',
        height: '100vh'
    }
    return (
      <div style={style}>
        <Map google={this.props.google} />
      </div>
    )
  }
}

export class Map extends React.Component {
    componentDidUpdate(prevProps, prevState){
        if (prevProps.google !== this.props.google){
            this.loadMap();
        }
    }
    componentDidMount(){
        this.loadMap();
    }
    loadMap(){
        if (this.props && this.props.google){
            const {google} = this.props;
            const maps = google.maps;

            const mapRef = this.refs.map;
            const node = ReactDOM.findDOMNode(mapRef);

            let zoom = 14;
            let lat = 37.774929
            let lng = 122.419416
            const center = new maps.LatLng(lat, lng);
            const mapConfig = Object.assign({}, {
                center: center,
                zoom: zoom
            })
            this.map = new maps.Map(node, mapConfig)
        }
    }
    render() {
        return (
            <div ref='map'>
                Loading map...
            </div>
        )
    }
}

export default GoogleApiComponent({
  apiKey: MY_API_KEY
})(LocationsContainer)

这是此映射组件在 main.js 中路由的位置：

import {render} from 'react-dom';
import React from 'react';
import Artists from './components/Artists'
import { Router, Route, Link, browserHistory } from 'react-router'
import Home from './components/HomePage'
import Gallery from './components/ArtGallery'
import ArtistPage from './components/ArtistPage'
import FavsPage from './components/FavsPage'
import LocationsContainer from './components/Locations'

//Create the route configuration
render((
  <Router history={browserHistory}>
    <Route path="/" component={Home} />
        <Route path="locations" component={LocationsContainer} />
        <Route path="artists" component={Artists} /> 
        <Route path="gallery" component={Gallery} />     
      <Route path="favorites" component={FavsPage} />
      <Route path=":artistName" component={ArtistPage} />
  </Router>
), document.getElementById('app'))

答案 1

对我来说，当我忘记在最后写作时，它就发生了。我知道这并不完全是你所拥有的，但其他阅读这个答案的人可以从中受益，希望如此。extends React.Component

答案 2

对我来说，这是因为我在设置动画状态时忘记使用关键字。new

例如：

fadeAnim: Animated.Value(0),

自

fadeAnim: new Animated.Value(0),

会修复它。

从5年开始编辑，并有更多解释：

最有可能的问题是你在某个地方错过了关键字，就像我上面所做的那样。这意味着你甚至不需要使用 React 来遇到这个错误。new

问题是在JS中，你可以创建这样的类（来自MDN的例子）：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  calcArea() {
    return this.height * this.width;
  }

}

如果要使用此类，则需要创建一个此类的新实例，如下所示：

const rect = new Rect(height, width);

出现此问题的原因是，您经常尝试对类的定义（或定义中的某些内容）执行函数调用，而不是类的实例。

从本质上讲，在代码中，您正在执行以下操作：

Rectangle.calcArea() // incorrect!

什么时候你应该做

rect.calcArea() // correct!