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"); 
    } 
  }

これが私の地図コンポーネントです。最後の3行である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)

そして、このmapコンポーネントが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'))

私にとってextends React.Componentは、最後に書くのを忘れたときに起こりました。それはあなたが持っていたものとは正確には違いますが、この答えを読んでいる他の人がこれから利益を得られることを願っています。

私にとっては、newアニメーション状態を設定するときにキーワードを使用するのを忘れたためです。

例えば：

fadeAnim: Animated.Value(0),

に

fadeAnim: new Animated.Value(0),

それを修正します。

tl; dr

React Router v4を使用している場合は、<Route/>コンポーネントをチェックして、本当にcomponentpropを使用してクラスベースのReactコンポーネントを渡してください！

より一般的には、クラスに問題がないと思われる場合は、クラスを呼び出すコードがそれを関数として使用していないかどうかを確認してください。

説明

このエラーが発生したのは、React Router v4を使用してrenderいて、クラスcomponent内の<Route/>コンポーネントを渡すためにコンポーネントのプロップの代わりに誤ってプロップを使用したためです。これは問題でした。なぜなら、Reactコンポーネントでrender機能するものであるのに対して、関数が期待される（呼び出される）ためですcomponent。

したがって、このコードでは：

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

<Route/>コンポーネントを含む行は、次のように記述されているはずです。

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

彼らがそれをチェックせず、そのような使用可能なエラーを与え、間違いを見つけやすいのは残念です。

私が使ったので私に起こりました

PropTypes.arrayOf(SomeClass)

の代わりに

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

export default宣言が重複しています。最初のものは実際には関数である2番目のものによってオーバーライドされます。

私にとっては、のComponentName.prototype代わりでしたComponentName.propTypes。PhpstormIDE によって自動提案されます。それが誰かを助けることを願っています。

同じ問題が発生しました。ES6コンポーネントクラスが拡張されていないために発生しましたReact.Component。

ほとんどの場合、これらの問題は、反応からコンポーネントを拡張できない場合に発生します。

import React, {Component} from 'react'

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

私にとっては、propTypesの代わりにプロトタイプを使用したためです

class MyComponent extends Component {

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

MyComponent.prototype = {

};

それはあるはずです

MyComponent.propTypes = {

};

Post.proptypes = {

}

に

Post.propTypes = {

}

そのようなエラーを非常に正確に監視する方法について誰かがコメントする必要があります。

このエラーが表示されるのは単一のケースではないようです。

ステートフルコンポーネントでコンストラクターを宣言しなかったときに、私に起こりました。

class MyComponent extends Component {

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

の代わりに

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

チェックできる2つのことは、

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

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

• React.Componentを必ず拡張してください
• プロトタイプの代わりにpropTypesを使用（IDEインテリセンスによる）

これは一般的な問題であり、1つのケースでは発生しません。ただし、すべての場合に共通の問題はimport、特定のコンポーネントを忘れてしまうことです（インストールしたライブラリからのものか、作成したカスタムメイドコンポーネントのどちらかは関係ありません）。

import {SomeClass} from 'some-library'

インポートせずに後で使用する場合、コンパイラーはそれを関数と見なします。したがって、壊れます。これは一般的な例です：

imports

...code...

そして、あなたのコードのどこかに

<Image {..some props} />

コンポーネントをインポートするのを忘れた場合<Image />、コンパイラーは他のインポートの場合のように文句を言うことはありませんが、コードに到達すると壊れます。

私にとっては、誤ってrenderメソッドを削除してしまったからです！

componentWillReceiveProps短いrenderメソッドの直前に、不要になったメソッドを含むクラスがありました。私が急いでそれを削除するときに、誤ってrenderメソッド全体も削除してしまいました。

完全に無関係なファイルのコメントを問題の「原因」として指摘するコンソールエラーが発生していたため、これは追跡するのが苦痛でした。

renderメソッドを誤って呼び出すという同様の問題がありました

エラーを出しました：

render = () => {
    ...
}

の代わりに

正しい：

render(){
    ...
}

そうしたときに私はそれを手に入れました：

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

正しく：

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

または

const foo = ...
export default foo

私にとっては、接続機能を適切にラップせず、デフォルトの2つのコンポーネントをエクスポートしようとしたために起こりました

反応ネイティブでmobxを使用しているときに間違ったクラスをインポートして間違ったストアを参照すると、このエラーに直面しました。

このスニペットでエラーに直面しました：

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

@inject ("counter")
@Observer

以下のスニペットのようないくつかの修正の後。このようにして問題を解決しました。

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

@inject("counterStore")
@observer

実際に何が悪かったのか、私が使用したのではなく、observer使用したのObserverではなく、間違ったクラスcounterStoreを使用していましたcounter。私はこのように私の問題を解決しました。

ファイルに MyComponent.js

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"
...

問題を見つけられますか？

中括弧を忘れて、MyComponent名前でインポートしましたmyFunction！

したがって、修正は次のとおりです。

import {myFunction} from './MyComponent'

クラスではなく関数のインポート中にインポート文を間違って作成すると、この問題が発生しました。removeMaterial別のモジュールの関数の場合：

正しい：

import { removeMaterial } from './ClaimForm';

違う：

import removeMaterial from './ClaimForm';

私は小さな間違いを犯してこのエラーを受け取りました。私のエラーは、クラスとしてではなく関数としてクラスをエクスポートすることでした。私が持っていたクラスファイルの最後に：

export default InputField();

あるべき時：

export default InputField;

私もこれに遭遇しました。reactコンポーネントの内部にJavaScriptエラーがある可能性があります。依存関係を使用している場合はnew、クラスの演算子を使用して新しいインスタンスをインスタンス化していることを確認してください。次の場合にエラーがスローされます

this.classInstance = Class({})

代わりに使用

this.classInstance = new Class({})

ブラウザのエラーチェーンに表示されます

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

それは私が信じているプレゼントです。

HMRを停止して、もう一度ヒットnpm startしてプロジェクトを再構築してください。
これにより、エラーが消えました。理由はわかりません。

私の場合、間違ってcomment代わりに書いたComponent

私はこれを書いたところです。

import React, { Component } from 'react';

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

これの代わりに。

import React, { Component } from 'react';

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

それは大したことではありませんが、私のような初心者にとっては本当に混乱しています。これがお役に立てば幸いです。

私の場合、JSXを使用して親コンポーネントが「<>」なしで他のコンポーネントを呼び出していました

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

直す

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

ここで別のレポート：エクスポートしたため、機能しませんでした：

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

の代わりに

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

ブラケットの位置に注意してください。どちらも正しいので、リンターやかわいらしいもの、または類似のものに捕まることはありません。追跡するのにしばらくかかった。

私の場合、最後にあるはずの関数Homeの最初の引数として、誤ってコンポーネント名（）を指定しconnectました。ああ。

これは確かに私にエラーを与えました：

export default connect(Home)(mapStateToProps, mapDispatchToProps)

しかし、これは確かにうまくいきました：

export default connect(mapStateToProps, mapDispatchToProps)(Home)

これは、render誤って関数に誤って名前を付けたときに発生しました。

import React from 'react';

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

このエラーのインスタンスは、クラスに適切なrenderメソッドがなかったために発生しました。

実際には、すべての問題が再接続します。ソリューション：

正解：

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

誤りとバグ：

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

私にとっては、rootReducer.jsでのレデューサーのインポートが間違っていました。レデューサーファイルの代わりにコンテナーをインポートしました。

例

import settings from './pages/Settings';

しかし、確かに

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

設定ディレクトリには、actions.js、index.js、reducer.jsというファイルが含まれています。

これを確認するには、redux / es / redux.jsからassertReducerShape（）関数のレデューサー引数を記録します。