Javascript 获得；无法将类作为函数调用"；在我的React项目中

我试图将React映射组件添加到项目中，但遇到错误。我用Fullstack React作为参考。我在google_map.js第83行中找到了抛出错误的地方：

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)

从“React”导入React
从“谷歌地图反应”导入谷歌地图组件
导出类位置Container.Component{
构造函数（）{
超级（）
}
render（）{
常量样式={
宽度：“100vw”，
高度：“100vh”
}
返回(
)
}
}
导出类映射扩展React.Component{
componentDidUpdate（prevProps、prevState）{
if（prevProps.google！==this.props.google）{
这个.loadMap（）；
}
}
componentDidMount（）{
这个.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）；
让zoom=14；
设lat=37.774929
假设液化天然气=122.419416
施工中心=新地图。LatLng（lat，lng）；
const mapConfig=Object.assign（{}{
中心:中心,，
缩放：缩放
})
this.map=new maps.map（节点，mapConfig）
}
}
render（）{
返回(
正在加载地图。。。
)
}
}
导出默认GoogleapComponent({
apiKey:MY_API_KEY
})（位置集装箱）

下面是在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'))

从'react dom'导入{render}；
从“React”导入React；
从“./components/Artists”导入艺术家
从“react Router”导入{Router，Route，Link，browserHistory}
从“./components/HomePage”导入主页
从“./components/ArtGallery”导入库
从“./components/ArtistPage”导入ArtistPage
从“./components/FavsPage”导入FavsPage
从“./组件/位置”导入位置容器
//创建路由配置
渲染((
)，document.getElementById（'app'））

您复制了

导出默认值

声明。第一个被第二个覆盖，第二个实际上是一个函数

对我来说，它发生在我忘记在末尾编写

extends React.Component

时。

---

我知道这并不完全是你所拥有的，但是其他阅读此答案的人可能会从中受益，希望如此。

我也遇到了同样的问题，因为我的

ES6

组件类没有扩展

React.component

发生在我身上，因为我使用了

PropTypes.arrayOf（SomeClass）

而不是

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return <div>Test</div>;
    }
}

PropTypes.arrayOf（PropTypes.instanceOf（SomeClass））

tl；博士 如果您使用React路由器v4，请检查

组件，如果您确实使用

组件

道具传递基于类的React组件

更一般地说：如果你的类看起来不错，那么检查调用它的代码是否没有尝试将它用作函数

解释 我得到这个错误是因为我使用的是React Router v4，我不小心使用了

渲染

道具而不是

组件中的

组件

来传递我的组件，该组件是一个类。这是一个问题，因为

render

需要（调用）一个函数，而

component

将在React组件上工作

所以在这段代码中：

<HashRouter>
    <Switch>
        <Route path="/" render={MyComponent} />
    </Switch>
</HashRouter>

包含

组件的行应该这样写：

<Route path="/" component={MyComponent} />

---

遗憾的是，他们没有检查它并给出一个可用的错误，用于此类容易发现的错误。

对我来说，这是因为我不小心删除了我的

渲染方法

我有一个类，它有一个我不再需要的
组件willreceiveprops
方法，紧跟在一个简短的
渲染
方法之前。在匆忙删除它的过程中，我意外地删除了整个
render
方法

这是一个很难追踪的问题，因为我发现控制台错误指向完全不相关的文件中的注释，这是问题的“来源”。
似乎没有出现此错误的单一情况

当我没有在statefull组件中声明构造函数时发生的

class MyComponent extends Component {

    render() {
        return <div>Test</div>;
    }
}

类MyComponent扩展组件{
render（）{
回归试验；
}
}

而不是

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return <div>Test</div>;
    }
}

类MyComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
回归试验；
}
}
我也遇到过这种情况，您的react组件中可能存在javascript错误。确保如果使用的是依赖项，则使用类上的
new
操作符实例化新实例。错误将抛出，如果

this.classInstance=Class（{}）

改用

this.classInstance=新类（{}）

您将在浏览器的错误链中看到

位于ReactCompositeComponentWrapper.\u constructComponentWithoutOwner

这就是我相信的赠品。
我有一个类似的问题，我错误地调用了render方法

给出了一个错误：

render = () => {
    ...
}

而不是

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return <div>Test</div>;
    }
}

正确：

render(){
    ...
}

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

例如：

fadeAnim:Animated.Value（0），

到

fadeAnim:新的动画值（0），

将解决此问题。
大多数情况下，这些问题发生在您未从react扩展组件时：

import React, {Component} from 'react'

export default class TimePicker extends Component {
    render() {
        return();     
    }
}

<
const foo = ...
export default foo

import { inject, Observer } from "mobx-react";

@inject ("counter")
@Observer

import { inject, observer } from "mobx-react";

@inject("counterStore")
@observer

import settings from './pages/Settings';

import settings from './pages/Settings/reducer';

import React, { Component } from 'react';

  class Something extends Component{
      render() {
          return();
     }
  }

import React, { Component } from 'react';

  class Something extends comment{
      render() {
          return();
     }
  }

export default class MyComponent extends React.Component {
...
}

export default class MyComponent extends React.Component {
...
}

export myFunction() {
...
}

import myFunction from './MyComponent'
...
myFunction() // => bang! "Cannot call a class as a function"
...

import {myFunction} from './MyComponent'

import { removeMaterial } from './ClaimForm';

import removeMaterial from './ClaimForm';

 <ComponentA someProp={someCheck ? ComponentX : ComponentY} />

<ComponentA someProp={someCheck ? <ComponentX /> : <ComponentY />} />

class MyComponent extends Component {

 render() {
    return <div>Test</div>;
  }
}

MyComponent.prototype = {

};

MyComponent.propTypes = {

};

export default compose(
  injectIntl,
  connect(mapStateToProps)(Onboarding)
);

export default compose(
  injectIntl,
  connect(mapStateToProps)
)(Onboarding);

export default connect(Home)(mapStateToProps, mapDispatchToProps)

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Post.proptypes = {

}

Post.propTypes = {

}

import React from 'react';

export class MyComponent extends React.Component {
  noCalledRender() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

export default InputField();

export default InputField;

class Slider extends React.Component {
    // Your React Code
}

Slider.propTypes = {
    // accessibility: PropTypes.bool,
}