wake-up-neo.com

"Ich kann eine Klasse nicht als Funktion aufrufen" in meinem React-Projekt

Ich versuche, meinem Projekt eine React-Map-Komponente hinzuzufügen, aber es wird ein Fehler angezeigt. Ich benutze Fullstack Reacts Blogpost als Referenz. Ich habe herausgefunden, wo der Fehler in google_map.js Zeile 83 ausgegeben wird:

function _classCallCheck(instance, Constructor) { 
  if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); 
    } 
  }

Hier ist mein Kartenbestand soweit. Die Seite lädt einfach (ohne Karte), wenn ich die letzten drei Zeilen aus den Zeilen 58-60 auskommentiere. edit: Ich habe die Änderungen vorgenommen, die @Dmitriy Nevzorov vorgeschlagen hat, und es gibt immer noch den gleichen Fehler.

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)

Und hier wird diese Map-Komponente in main.js geroutet:

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'))
85
Mike Fleming

Für mich passierte es, als ich vergessen hatte, extends React.Component am Ende zu schreiben ... Ich weiß, dass es nicht genau das ist, was DU hast, aber andere, die diese Antwort lesen, können davon hoffentlich profitieren.

147
programmer

tl; dr

Wenn Sie React Router v4 verwenden, überprüfen Sie Ihre <Route/>-Komponente, wenn Sie tatsächlich die component-Komponente verwenden, um Ihre klassenbasierte React-Komponente zu übergeben!

Allgemeiner: Wenn Ihre Klasse in Ordnung zu sein scheint, prüfen Sie, ob der aufrufende Code nicht versucht, sie als Funktion zu verwenden.

Erläuterung

Ich habe diese Fehlermeldung erhalten, weil ich React Router v4 verwendet habe und versehentlich die render-Komponente anstelle der component-Komponente in der <Route/>-Komponente verwendet habe, um meine Komponente zu übergeben, die eine Klasse war. Dies war ein Problem, da render eine Funktion erwartet (aufruft), während component die Funktion ist, die mit React-Komponenten arbeitet.

Also in diesem Code:

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

Die Zeile mit der <Route/>-Komponente sollte folgendermaßen geschrieben sein:

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

Es ist eine Schande, dass sie es nicht überprüfen und einen brauchbaren Fehler für einen solchen und leicht zu findenden Fehler geben.

53
totymedli

Für mich lag es daran, dass ich vergessen habe, das Schlüsselwort new beim Einrichten des animierten Status zu verwenden.

z.B:

fadeAnim: Animated.Value(0),

zu

fadeAnim: new Animated.Value(0),

würde es reparieren.

53
William Park

Ist mir passiert, weil ich benutzt habe

PropTypes.arrayOf(SomeClass)

anstatt von

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

42
Dan Balaban

Sie haben die export default-Deklaration dupliziert. Der erste wird durch den zweiten überschrieben, was eigentlich eine Funktion ist. 

9

Ich habe das gleiche Problem festgestellt, weil meine Komponente ES6 nicht React.Component erweitert wurde.

8
Jam

Für mich war es ComponentName.prototype anstelle von ComponentName.propTypes____. Auto. Vorgeschlagen von Phpstorm IDE. Ich hoffe es hilft jemandem.

7
codersaif

Meistens treten diese Probleme auf, wenn Sie die Erweiterung von Component aus der Reaktion verpassen

import React, {Component} from 'react'

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

Für mich war es, weil ich Prototyp anstelle von propTypes verwendet habe.

class MyComponent extends Component {

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

MyComponent.prototype = {

};

es sollte sein 

MyComponent.propTypes = {

};
4
Post.proptypes = {

}

zu

Post.propTypes = {

}

jemand sollte kommentieren, wie ein solcher Fehler sehr genau überwacht werden kann.

2
Mbanda

Anscheinend gibt es keinen einzelnen Fall, wenn dieser Fehler auftritt.

Ist mir passiert, als ich in statefull Komponente keinen Konstruktor deklariert habe.

class MyComponent extends Component {

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

anstatt

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Ich bin auf diesen Fehler gestoßen, als ich das falsche class importierte und auf das falsche store während der Verwendung von mobx in reag-native verwies.

Ich habe einen Fehler in diesem Snippet festgestellt:

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

@inject ("counter")
@Observer

Nach ein paar Korrekturen wie unten beschrieben. Ich habe mein Problem so gelöst.

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

@inject("counterStore")
@observer

Was eigentlich falsch war, ich verwendete die falsche Klasse anstelle von observer, ich verwendete Observer und anstelle von counterStore verwendete ich counter. Ich habe mein Problem so gelöst.

1
badarshahzad

Für mich ist es passiert, weil ich meine Connect-Funktion nicht richtig umbrochen habe und versucht habe, zwei Standardkomponenten zu exportieren

1
Dmitriy

Ich hatte es, als ich es tat:

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

korrekt:

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

oder

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

Ich hatte ein ähnliches Problem, dass ich die Render-Methode falsch aufgerufen habe

Gab einen Fehler:

render = () => {
    ...
}

anstatt

richtig: 

render(){
    ...
}
1

In der Datei MyComponent.js

export default class MyComponent extends React.Component {
...
}

Ich habe eine Funktion zu dieser Komponente hinzugefügt:

export default class MyComponent extends React.Component {
...
}

export myFunction() {
...
}

und dann in einer anderen Datei diese Funktion importiert:

import myFunction from './MyComponent'
...
myFunction() // => bang! "Cannot call a class as a function"
...

Kannst du das Problem erkennen?

Ich habe die geschweiften Klammern vergessen und MyComponent unter dem Namen myFunction importiert!

Das Update war also:

import {myFunction} from './MyComponent'
1
Mike

In meinem Fall ruft eine übergeordnete Komponente mithilfe von JSX andere Komponenten ohne "<>" auf.

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

fix 

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

Für mich war es, weil ich meine render-Methode versehentlich gelöscht hatte!

Ich hatte eine Klasse mit einer componentWillReceiveProps-Methode, die ich nicht mehr brauchte, unmittelbar vor einer kurzen render-Methode. In meiner Hast entfernte ich aus Versehen auch die gesamte render-Methode.

Dies war ein PAIN zum Aufspüren, da ich Konsolenfehler bekam, die auf Kommentare in völlig irrelevanten Dateien als "Quelle" des Problems hinwiesen.

0
Alex McMillan

Ich habe dies erlebt, wenn Sie beim Importieren einer Funktion eine Importanweisung falsch schreiben und nicht eine Klasse. Wenn removeMaterial eine Funktion in einem anderen Modul ist:

Recht:

import { removeMaterial } from './ClaimForm';

Falsch:

import removeMaterial from './ClaimForm';
0
shacker

Eigentlich alles Problem Redux verbinden. lösungen:

Richtig:

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

Falsch & Fehler:

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

Dies ist ein allgemeines Problem und erscheint nicht in einem einzelnen Fall. Das häufigste Problem ist jedoch in allen Fällen, dass Sie vergessen, eine bestimmte Komponente zu import zu vergessen (egal, ob es sich um eine von Ihnen installierte Bibliothek oder eine von Ihnen erstellte Komponente handelt):

import {SomeClass} from 'some-library'

Wenn Sie es später verwenden, ohne es zu importieren, hält es der Compiler für eine Funktion. Daher bricht es. Dies ist ein allgemeines Beispiel:

imports

...code...

und dann irgendwo in Ihrem Code

<Image {..some props} />

Wenn Sie vergessen haben, die Komponente <Image /> zu importieren, wird der Compiler nicht wie andere Importe beschweren, sondern bricht, wenn er Ihren Code erreicht.

0
Tim G. Pegas

Ich bin auch darauf gestoßen, es ist möglich, dass Sie einen Javascript-Fehler in Ihrer Reaktionskomponente haben. Stellen Sie sicher, dass Sie bei Verwendung einer Abhängigkeit den Operator new für die Klasse verwenden, um die neue Instanz zu instanziieren. Fehler wird werfen wenn

this.classInstance = Class({})

verwenden Sie stattdessen

this.classInstance = new Class({})

sie werden in der Fehlerkette im Browser sehen

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

das ist das Werbegeschenk, glaube ich.

0
mibbit

In meinem Fall habe ich aus Versehen comment anstelle von Component geschrieben

Ich habe das gerade geschrieben.

import React, { Component } from 'react';

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

An Stelle von.

import React, { Component } from 'react';

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

es ist keine große Sache, aber für einen Anfänger wie mich ist es wirklich verwirrend .. Ich hoffe, es wird hilfreich sein.

0
Uddesh_jain

Stoppen Sie Ihre HMR und drücken Sie erneut npm start, um Ihr Projekt neu zu erstellen.
Dies hat den Fehler verschwinden lassen, weiß nicht warum. 

0

Noch ein Bericht hier: Beim Exportieren hat es nicht funktioniert: 

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

anstatt 

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

Beachten Sie die Position der Klammern. Beide sind korrekt und werden weder von einem Linter noch hübscher oder etwas Ähnlichem erwischt. Ich habe eine Weile gebraucht, um es aufzuspüren. 

Dies geschah, als ich aus Versehen meine render-Funktion falsch benannt hatte:

import React from 'react';

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

Mein Fehler wurde einfach verursacht, weil meine Klasse keine render-Methode hatte.

0
Bryan Bor

In meinem Fall habe ich versehentlich den Komponentennamen (Home) als erstes Argument für die connect-Funktion angegeben, während sie am Ende stehen sollte. duh.

Dieser gab mir sicherlich den Fehler:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

Aber das hier hat sicher funktioniert:

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