web-dev-qa-db-ja.com

私の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)

そしてここで、このマップコンポーネントが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'))
javascriptgoogle-mapsreactjsecmascript-6react-router
94
Mike Fleming

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

164
programmer

tl; dr

もしあなたがReact Router v4を使っているのであれば、あなたのクラスベースのReactコンポーネントを渡すためにcomponentプロップを使っているのであれば<Route/>コンポーネントをチェックしてください！

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

説明

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

だから、このコードでは：

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

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

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

彼らがそれをチェックせず、そのようなそしてキャッチしやすい間違いのために使用可能なエラーを与えることは残念です。

59
totymedli

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

例えば：

fadeAnim: Animated.Value(0),

に

fadeAnim: new Animated.Value(0),

それを修正します。

46
William Park

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

PropTypes.arrayOf(SomeClass)

の代わりに

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

42
Dan Balaban

私は同じ問題を経験しました、それは私のES6コンポーネントクラスがReact.Componentを拡張していなかったために起こりました。

11
Jam

export default宣言が重複しています。最初のものは実際には関数である2番目のものによって上書きされます。

11
Dmitriy Nevzorov

私にとっては、ComponentName.prototypeではなくComponentName.propTypesでした。 autoがPhpstorm IDEによって推奨されています。誰かに役立つことを願っています。

9
codersaif

ほとんどの場合、これらの問題は、Componentをreactから拡張し忘れた場合に発生します。

import React, {Component} from 'react'

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

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

class MyComponent extends Component {

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

MyComponent.prototype = {

};

それはあるべきです

MyComponent.propTypes = {

};
6
Onengiye Richard
Post.proptypes = {

}

に

Post.propTypes = {

}

誰かが非常に正確な方法でそのようなエラーを監視する方法についてコメントするべきです。

3
Mbanda

このエラーが表示されたときに単一のケースがないように見えます。

ステートフルコンポーネントでコンストラクターを宣言しなかったときに私には思われました。

class MyComponent extends Component {

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

の代わりに

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

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を使用していました。私はこのようにして問題を解決しました。

1
badarshahzad

クラスではなく、関数のインポート中に誤ってimportステートメントを書くと、これを経験しました。 removeMaterialが他のモジュールの関数の場合

右：

import { removeMaterial } from './ClaimForm';

違う：

import removeMaterial from './ClaimForm';
1
shacker

私のために私は私のconnect関数を正しくラップしていない、そしてデフォルトの2つのコンポーネントをエクスポートしようとしたために起こりました

1
Dmitriy

私がそうしたとき私はそれを持っていました：

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

正しく：

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

または

const foo = ...
export default foo
1
Jeka Yaroshenko

私は誤ってrenderメソッドを呼び出していたのと同じ問題を抱えていました

エラーを出しました：

render = () => {
    ...
}

の代わりに

正しい：

render(){
    ...
}
1
Emile Esterhuizen

ファイル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'
1
Mikhail Vasin

私の場合、JSXを使用すると、親コンポーネントは "<>"なしで他のコンポーネントを呼び出していました。

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

直す

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

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

私はもう必要ないcomponentWillReceivePropsメソッドを持つクラスを持っていました。すぐ前に短いrenderメソッドがありました。急いでそれを削除すると、私は偶然にもrenderメソッド全体を削除しました。

これは、PAINを追跡するためのものでした。コンソールエラーが問題の「原因」として、まったく関係のないファイル内のコメントを指しているからです。 。

0
Alex McMillan

実際には、すべての問題を減らすことができます。解決策：

正しい：

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

間違った＆Bug：

export default connect(PageName)(mapStateToProps, mapDispatchToProps)
0
Batuhan Orhan

これは一般的な問題であり、単一のケースには現れません。しかし、すべての場合に共通の問題は、特定のコンポーネントをimportするのを忘れていることです（インストールしたライブラリから作成したものでも、独自に作成したコンポーネントから作成したものでも問題ありません）。

import {SomeClass} from 'some-library'

インポートしないで後で使用すると、コンパイラはそれを関数と見なします。そのため、壊れます。これは一般的な例です。

imports

...code...

そしてコードのどこかに

<Image {..some props} />

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

0
Tim G. Pegas

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

this.classInstance = Class({})

代わりに使用します

this.classInstance = new Class({})

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

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

それは私が信じている景品です。

0
mibbit

私の場合、私は間違ってcommentの代わりにComponentを書きました

私はちょうどこれを書いた。

import React, { Component } from 'react';

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

これの代わりに。

import React, { Component } from 'react';

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

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

0
Uddesh_jain

あなたのHMRを止めてみて、あなたのプロジェクトを再構築するためにもう一度npm startを押してください。
これで、エラーが消えるようになりました。理由はわかりません。

0
Alexander Gorelik

ここにもう一つのレポート：それは私がエクスポートしたようにうまくいきませんでした：

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

の代わりに

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

括弧の位置に注意してください。どちらも正しいもので、リンターやきれいな人、あるいは似たようなものには巻き込まれません。それを突き止めるためにしばらく時間がかかりました。

0
Sebastijan Dumančić

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

import React from 'react';

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

このエラーの私の例は、私のクラスが適切なrenderメソッドを持っていなかったことが原因です。

0
Bryan Bor

私の場合は、コンポーネント名（Home）をconnect関数の最初の引数として誤って入れてしまいましたが、最後になることになっていました。当たり前。

これは私に間違いなく私を与えました：

export default connect(Home)(mapStateToProps, mapDispatchToProps)

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

export default connect(mapStateToProps, mapDispatchToProps)(Home)
0
scaryguy