在我的React项目中获得“无法将类作为函数调用”

JavaScript

梅小宇宙

2020-03-11

我试图将React map组件添加到我的项目中,但遇到错误。我使用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'))

第832篇《在我的React项目中获得“无法将类作为函数调用”》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

23个回答
Mandy猴子 2020.03.11

实际上,所有问题都与redux连接。解决方案:

正确的

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

错误与错误

export default connect(PageName)(mapStateToProps, mapDispatchToProps)
JinJin西门神乐 2020.03.11

就我而言,我不小心将组件名称(Home)用作connect函数的第一个参数,而该参数应放在末尾。h

这个-当然-给我错误:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

但这确实奏效了:

export default connect(mapStateToProps, mapDispatchToProps)(Home)
西门飞云泡芙 2020.03.11

这里的另一个报告:我导出时不起作用:

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

代替

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

注意括号的位置。两者都是正确的,不会被棉短绒,漂亮的东西或类似的东西所抓住。花了我一段时间来追踪它。

卡卡西猪猪 2020.03.11

就我而言,使用JSX时,父组件正在调用其他没有“ <>”的组件

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

固定

<ComponentA someProp={someCheck ? <ComponentX /> : <ComponentY />} />
Gil宝儿 2020.03.11

尝试停止您的HMR,然后npm start再次点击以重建您的项目。
这样,错误就消失了,不知道为什么。

斯丁Jim 2020.03.11

我也遇到了这个问题,您的react组件内部可能有一个javascript错误。确保是否使用依赖项,并且正在使用new类上的运算符实例化新实例。错误将抛出

this.classInstance = Class({})

改为使用

this.classInstance = new Class({})

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

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

我相信这就是赠品。

Tom凯飞云 2020.03.11

对我来说,这是因为我不小心删除了我的render方法!

componentWillReceiveProps在短render方法之前,我有一个不再需要的方法的类。在匆忙删除它的过程中,我不小心也删除了整个render方法。

这是一个值得追寻的难题,因为我收到控制台错误,指出完全不相关的文件中的注释是问题的“根源”。

逆天小胖Mandy 2020.03.11

您可以检查的两件事是,

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

Slider.propTypes = {
    // accessibility: PropTypes.bool,
}
  • 确保您扩展了React.Component
  • 使用propTypes代替原型(根据IDE intellisense)
GreenStafan 2020.03.11

我因犯小错误而收到此错误。我的错误是将类导出为函数而不是类。在班级文件的底部,我有:

export default InputField();

应该是什么时候:

export default InputField;
Tom卡卡西村村 2020.03.11

当我在react-native中使用mobx 导入错误的并引用错误的存储时,我遇到了此错误

我在此代码段中遇到错误:

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

@inject ("counter")
@Observer

经过如下几段修正后。我这样解决了我的问题。

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

@inject("counterStore")
@observer

实际出了什么问题,我使用的是错误的类,而不是observer使用的是Observer,而不是counterStore使用的counter我这样解决了我的问题。

西里阿飞 2020.03.11

对我来说,发生这种情况是因为我没有正确包装连接函数,并试图导出默认的两个组件

小胖Itachi 2020.03.11

我这样做的时候得到了它:

function foo() (...) export default foo

正确地:

export default  () =>(...);

要么

const foo = ...
export default foo
Sam伽罗 2020.03.11

我有一个类似的问题,我错误地调用了render方法

出现错误:

render = () => {
    ...
}

代替

正确:

render(){
    ...
}
逆天Itachi 2020.03.11

似乎没有单个情况出现此错误。

当我没有在statefull组件中声明构造函数时,发生在我身上。

class MyComponent extends Component {

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

代替

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return <div>Test</div>;
    }
}
Near小哥神奇 2020.03.11
Post.proptypes = {

}

Post.propTypes = {

}

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

小小Stafan宝儿 2020.03.11

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

class MyComponent extends Component {

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

MyComponent.prototype = {

};

应该是

MyComponent.propTypes = {

};
古一蛋蛋 2020.03.11

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

LEY番长 2020.03.11

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

西里Stafan小哥 2020.03.11

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

A飞云 2020.03.11

发生在我身上,因为我曾经

PropTypes.arrayOf(SomeClass)

代替

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

凯凯 2020.03.11

tl; dr

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

更一般而言:如果您的类看起来不错,请检查调用该类的代码是否不尝试将其用作函数。

说明

我得到这个错误,因为我是用路由器做出反应v4和我无意中使用的render道具,而不是component一个在<Route/>分量通过我的组件,这是一类。这是一个问题,因为render期望(调用)一个函数,而这个函数却component可以在React组件上运行。

所以在这段代码中:

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

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

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

可惜的是,他们不检查它并给出了这样的错误并易于发现错误。

神奇西里 2020.03.11

对我来说,这是因为我new在设置Animated状态时忘记了使用关键字。

例如:

fadeAnim: Animated.Value(0),

fadeAnim: new Animated.Value(0),

会解决它。

米亚神乐 2020.03.11

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android