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

Question

我正在尝试将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)

以下是此地图组件在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'))

Answer 1

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

Answer 2

TL;博士

如果您<Route/>确实使用了componentprop来传递基于类的React组件,请使用React Router v4检查您的组件!

更一般地说:如果您的类似乎没问题,请检查调用它的代码是否尝试将其用作函数.

说明

我因为我是用路由器做出反应V4得到这个错误,我不小心使用的render道具,而不是component一个在<Route/>分量通过我的组件,这是一类.这是一个问题,因为render期望(调用)一个函数,component而是一个将在React组件上工作的函数.

所以在这段代码中:

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

包含该<Route/>组件的行应该是这样编写的:

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

遗憾的是,他们没有检查它并为这样容易发现的错误提供了一个可用的错误.

Answer 3

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

例如:

fadeAnim: Animated.Value(0),

至

fadeAnim: new Animated.Value(0),

会解决它.

Answer 4

发生在我身上因为我曾经使用过

PropTypes.arrayOf(SomeClass)

代替

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Answer 5

你有重复的export default声明.第一个被第二个覆盖,实际上是一个函数.

Answer 6

我遇到了同样的问题,因为我的ES6组件类没有扩展React.Component.

Answer 7

对我而言,它ComponentName.prototype不是ComponentName.propTypes.PhpstormIDE 自动建议.希望它会帮助某人.

Answer 8

大多数情况下,当您错过从反应扩展Component时会出现这些问题:

import React, {Component} from 'react'

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

Answer 9

对我来说是因为我使用原型而不是propTypes

class MyComponent extends Component {

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

MyComponent.prototype = {

};

应该是

MyComponent.propTypes = {

};

Answer 10

Post.proptypes = {

}

至

Post.propTypes = {

}

有人应该评论如何以非常精确的方式监视此类错误。

Answer 11

这是一个普遍问题，并不是个别案例中出现的。但是，所有情况下的常见问题是您忘记了import特定组件（无论它是来自您安装的库还是您创建的自定义组件都没关系）：

import {SomeClass} from 'some-library'

当您稍后使用它而不导入它时，编译器会认为它是一个函数。因此，它破裂了。这是一个常见的例子：

imports

...code...

然后在你的代码中的某个地方

<Image {..some props} />

如果您忘记导入该组件<Image />，那么编译器不会像其他导入那样抱怨，但会在到达您的代码时中断。

Answer 12

您可以检查的两件事是，

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

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

• 确保你扩展了React.Component
• 使用propTypes而不是原型（根据 IDE 智能感知）