Obtenir "Impossible d'appeler une classe en tant que fonction" dans mon projet React

J'essaie d'ajouter un composant de carte React à mon projet mais je rencontre une erreur. J'utilise l'article de blog de Fullstack React comme référence. J'ai retracé l'emplacement de l'erreur dans la ligne 83 de google_map.js:

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

Voici mon composant de carte jusqu'à présent. La page se charge très bien (sans carte) lorsque je commente les lignes 58-60, les trois dernières lignes. edit: J'ai fait les changements suggérés par @Dmitriy Nevzorov et cela me donne toujours la même erreur.

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)

Et voici où ce composant de carte est acheminé dans 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'))

Pour moi, c'est arrivé quand j'ai oublié d'écrire extends React.Componentà la fin. Je sais que ce n'est pas exactement ce que VOUS aviez, mais d'autres personnes lisant cette réponse peuvent en bénéficier, espérons-le.

Pour moi, c'était parce que j'avais oublié d'utiliser le newmot - clé lors de la configuration de l'état animé.

par exemple:

fadeAnim: Animated.Value(0),

à

fadeAnim: new Animated.Value(0),

le réparerait.

tl; dr

Si vous utilisez React Router v4, vérifiez votre <Route/>composant si vous utilisez bien le componentprop pour passer votre composant React basé sur la classe!

Plus généralement: si votre classe semble correcte, vérifiez si le code qui l'appelle n'essaye pas de l'utiliser comme une fonction.

Explication

J'ai eu cette erreur car j'utilisais React Router v4 et j'ai accidentellement utilisé l' renderaccessoire au lieu de componentcelui du <Route/>composant pour passer mon composant qui était une classe. C'était un problème, car renderattend (appelle) une fonction, tandis que componentc'est celle qui fonctionnera sur les composants React.

Donc dans ce code:

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

La ligne contenant le <Route/>composant aurait dû être écrite comme ceci:

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

C'est dommage qu'ils ne le vérifient pas et donnent une erreur utilisable pour une telle erreur facile à attraper.

M'est arrivé parce que j'ai utilisé

PropTypes.arrayOf(SomeClass)

au lieu de

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Vous avez une export defaultdéclaration en double . Le premier est remplacé par le second qui est en fait une fonction.

Pour moi, c'était ComponentName.prototypeau lieu de ComponentName.propTypes. auto suggéré par PhpstormIDE. J'espère que cela aidera quelqu'un.

J'ai rencontré le même problème, cela s'est produit parce que ma ES6classe de composants ne s'étendait pas React.Component.

La plupart du temps, ces problèmes se produisent lorsque vous ne parvenez pas à étendre le composant de react:

import React, {Component} from 'react'

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

Pour moi, c'était parce que j'ai utilisé un prototype au lieu de propTypes

class MyComponent extends Component {

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

MyComponent.prototype = {

};

ça devrait être

MyComponent.propTypes = {

};

Post.proptypes = {

}

à

Post.propTypes = {

}

quelqu'un devrait commenter comment surveiller une telle erreur d'une manière très précise.

Il semble qu'il n'y ait pas de cas unique lorsque cette erreur apparaît.

Cela m'est arrivé quand je n'ai pas déclaré le constructeur dans un composant statefull.

class MyComponent extends Component {

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

au lieu de

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Deux choses que vous pouvez vérifier sont,

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

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

• Assurez-vous que vous étendez React.Component
• Utilisez propTypes au lieu de prototype (selon IDE intellisense)

Il s'agit d'un problème général qui n'apparaît pas dans un seul cas. Mais, le problème commun dans tous les cas est que vous oubliez importun composant spécifique (peu importe s'il provient d'une bibliothèque que vous avez installée ou d'un composant personnalisé que vous avez créé):

import {SomeClass} from 'some-library'

Lorsque vous l'utilisez plus tard, sans l'importer, le compilateur pense que c'est une fonction. Par conséquent, ça casse. Voici un exemple courant:

imports

...code...

et puis quelque part dans ton code

<Image {..some props} />

Si vous avez oublié d'importer le composant, <Image />le compilateur ne se plaindra pas comme il le fait pour les autres importations, mais se cassera lorsqu'il atteindra votre code.

Pour moi, c'était parce que j'avais accidentellement supprimé ma renderméthode!

J'avais une classe avec une componentWillReceivePropsméthode dont je n'avais plus besoin, précédant immédiatement une renderméthode courte . Dans ma hâte de le retirer, j'ai également supprimé accidentellement toute la renderméthode.

C'était une DOULEUR à traquer, car j'obtenais des erreurs de console pointant des commentaires dans des fichiers complètement non pertinents comme étant la «source» du problème.

J'ai eu un problème similaire, j'appelais la méthode de rendu de manière incorrecte

A donné une erreur:

render = () => {
    ...
}

au lieu de

correct:

render(){
    ...
}

Je l'ai eu quand je l'ai fait:

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

correctement:

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

ou

const foo = ...
export default foo

Pour moi, cela s'est produit parce que je n'ai pas correctement enveloppé ma fonction de connexion et que j'ai essayé d'exporter deux composants par défaut

J'ai rencontré cette erreur lorsque j'ai importé la mauvaise classe et que j'ai fait référence à un mauvais magasin lors de l'utilisation de mobx dans react-native.

J'ai rencontré une erreur dans cet extrait:

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

@inject ("counter")
@Observer

Après quelques corrections comme l'extrait ci-dessous. J'ai résolu mon problème de cette façon.

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

@inject("counterStore")
@observer

Ce qui n'allait pas, c'est que j'utilisais la mauvaise classe au lieu de l' observerutiliser Observeret au lieu de l' counterStoreutiliser counter. J'ai résolu mon problème de cette façon.

Dans le fichier MyComponent.js

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

J'ai mis une fonction liée à ce composant:

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

export myFunction() {
...
}

puis dans un autre fichier importé cette fonction:

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

Pouvez-vous repérer le problème?

J'ai oublié les accolades, et importé MyComponentsous le nom myFunction!

Donc, le correctif était:

import {myFunction} from './MyComponent'

J'ai vécu cela lors de l'écriture d'une instruction d'importation incorrecte lors de l'importation d'une fonction plutôt que d'une classe. Si removeMaterialest une fonction dans un autre module:

Droite:

import { removeMaterial } from './ClaimForm';

Faux:

import removeMaterial from './ClaimForm';

J'ai reçu cette erreur en faisant une petite erreur. Mon erreur exportait la classe en tant que fonction plutôt qu'en tant que classe. Au bas de mon fichier de classe, j'avais:

export default InputField();

quand cela aurait dû être:

export default InputField;

J'ai également rencontré cela, il est possible que vous ayez une erreur javascript à l'intérieur de votre composant react. Assurez-vous que si vous utilisez une dépendance, vous utilisez l' newopérateur sur la classe pour instancier la nouvelle instance. Une erreur jettera si

this.classInstance = Class({})

utilisez plutôt

this.classInstance = new Class({})

vous verrez dans la chaîne d'erreur dans le navigateur

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

c'est le cadeau que je crois.

Essayez de vous arrêter HMR et appuyez à npm startnouveau pour reconstruire votre projet.
Cela a fait disparaître l'erreur, je ne sais pas pourquoi.

Dans mon cas, j'ai écrit commentà la place de Componentpar erreur

Je viens d'écrire ceci.

import React, { Component } from 'react';

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

Au lieu de cela.

import React, { Component } from 'react';

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

ce n'est pas grave mais pour un débutant comme moi c'est vraiment déroutant. J'espère que cela vous sera utile.

Dans mon cas, en utilisant JSX un composant parent appelait d'autres composants sans le "<>"

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

réparer

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

Un autre rapport ici: cela n'a pas fonctionné comme j'ai exporté:

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

au lieu de

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

Notez la position des crochets. Les deux sont corrects et ne seront pas pris par un linter ou plus joli ou quelque chose de similaire. Il m'a fallu un certain temps pour le retrouver.

Dans mon cas, j'ai accidentellement mis le nom du composant ( Home) comme premier argument à connectfonctionner alors qu'il était censé être à la fin. duh.

Celui-ci -sûrement- m'a donné l'erreur:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

Mais celui-ci a bien fonctionné:

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Cela s'est produit lorsque j'ai accidentellement nommé ma renderfonction de manière incorrecte:

import React from 'react';

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

Mon exemple de cette erreur était simplement dû au fait que ma classe n'avait pas de renderméthode appropriée .

En fait, tout le problème se connecte redux. solutions:

Correct :

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

Mauvais et bug :

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

Pour moi, c'était une mauvaise importation d'un réducteur dans le rootReducer.js. J'ai importé un conteneur au lieu d'un fichier réducteur.

Exemple

import settings from './pages/Settings';

Mais bien sûr que ça devrait être

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

Où le répertoire de paramètres contient les fichiers suivants actions.js, index.js, reducer.js.

Pour le vérifier, vous pouvez enregistrer les réducteurs arg de la fonction assertReducerShape () à partir du redux / es / redux.js.