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

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

正确的：

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

错误与错误：

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

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

这个-当然-给我错误：

export default connect(Home)(mapStateToProps, mapDispatchToProps)

但这确实奏效了：

export default connect(mapStateToProps, mapDispatchToProps)(Home)

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

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

代替

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

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

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

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

固定

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

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

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

this.classInstance = Class({})

改为使用

this.classInstance = new Class({})

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

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

我相信这就是赠品。

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

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

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

您可以检查的两件事是，

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

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

• 确保您扩展了React.Component
• 使用propTypes代替原型（根据IDE intellisense）

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

export default InputField();

应该是什么时候：

export default InputField;

当我在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。我这样解决了我的问题。

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

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

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

正确地：

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

要么

const foo = ...
export default foo

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

出现错误：

render = () => {
    ...
}

代替

正确：

render(){
    ...
}

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

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

class MyComponent extends Component {

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

代替

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Post.proptypes = {

}

至

Post.propTypes = {

}

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

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

class MyComponent extends Component {

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

MyComponent.prototype = {

};

应该是

MyComponent.propTypes = {

};

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

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

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

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

PropTypes.arrayOf(SomeClass)

代替

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

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} />

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

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

例如：

fadeAnim: Animated.Value(0),

至

fadeAnim: new Animated.Value(0),

会解决它。

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