Obtenir «Impossible d’appeler une classe en tant que fonction» dans mon projet Réagir

Pour moi, c’est arrivé quand j’ai oublié d’écrire des extends React.Component à la fin. Je sais que ce n’est pas exactement ce que vous aviez, mais les lecteurs de cette réponse peuvent en profiter, espérons-le.

tl; dr

Si vous utilisez React Router v4, vérifiez votre composant si vous utilisez le component prop pour réussir 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’essaie pas de l’utiliser comme une fonction.

Explication

J’ai eu cette erreur parce que j’utilisais React Router v4 et j’ai utilisé accidentellement le prop propane au lieu du component du component pour passer mon composant qui était une classe. C’était un problème, car render attend (appelle) une fonction, alors que component est celui qui fonctionnera sur les composants React.

Donc dans ce code:

La ligne contenant le composant devrait avoir été écrite comme ceci:

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

Pour moi, c’est parce que j’ai oublié d’utiliser le new mot-clé lors de la configuration de l’état animé.

par exemple:

fadeAnim: Animated.Value(0),

à

fadeAnim: new Animated.Value(0),

le réparerait.

Est arrivé à moi parce que j’ai utilisé

PropTypes.arrayOf(SomeClass)

au lieu de

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Vous avez dupliqué export default déclaration d’ export default . Le premier est remplacé par le second, qui est en fait une fonction.

J’ai rencontré le même problème, car ma classe de composants ES6 n’allonge pas React.Component.

Pour moi, c’était ComponentName.prototype au lieu de ComponentName.propTypes. auto suggéré par phpstorm IDE. J’espère que ça va aider quelqu’un.

La plupart du temps, ces problèmes surviennent lorsque vous ratez l’extension de Component :

 import React, {Component} from 'react' export default class TimePicker extends Component { render() { return(); } } 

On dirait qu’il n’y a pas de cas unique lorsque cette erreur apparaît.

Je suis arrivé quand je n’ai pas déclaré le constructeur dans le composant statefull.

 class MyComponent extends Component { render() { return 
Test
; } } 

au lieu de

 class MyComponent extends Component { constructor(props) { super(props); } render() { return 
Test
; } } 

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’avais quand je l’ai fait:

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

correctement:

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

ou

 const foo = ... export default foo 

Pour moi, c’était parce que j’avais accidentellement supprimé ma méthode de render !

J’ai eu une classe avec une méthode componentWillReceiveProps je n’avais plus besoin, précédant immédiatement une méthode de render rapide. Dans ma hâte de le supprimer, j’ai accidentellement supprimé la méthode de render complète.

C’était un PAIN à dépister, car j’obtenais des erreurs de console pointant sur des commentaires dans des fichiers complètement inutiles comme étant la “source” du problème.

Pour moi, c’est arrivé parce que je n’ai pas emballé correctement ma fonction de connexion et j’ai essayé d’exporter deux composants par défaut

Essayez de vous arrêter HMR et appuyez sur npm start votre projet.
Cela a fait disparaître l’erreur, ne sais pas pourquoi.

J’ai fait face à cette erreur lorsque j’ai importé la mauvaise classe et que je me suis référé à un mauvais magasin en utilisant 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 dans 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 était en fait faux, j’utilisais la mauvaise classe à la place de l’ observer j’utilisais Observer et au lieu de counterStore j’utilisais un counter . J’ai résolu mon problème comme ça.

Dans mon cas, j’ai écrit un comment à la place de Component par 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 un gros problème mais pour un débutant comme moi, c’est vraiment déroutant. J’espère que cela sera utile.

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() { ... } 

et 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 MyComponent importé MyComponent sous le nom myFunction !

Donc, le correctif était:

 import {myFunction} from './MyComponent' 

Je l’ai constaté lors de l’écriture d’une instruction d’importation incorrecte lors de l’importation d’une fonction, plutôt que d’une classe. Si removeMaterial est une fonction d’un autre module:

Droite:

 import { removeMaterial } from './ClaimForm'; 

Faux:

 import removeMaterial from './ClaimForm'; 

Dans mon cas, l’utilisation d’un composant parent JSX appelait d’autres composants sans le “<>”

réparer

  : } /> 

J’ai également rencontré ceci, il est possible que vous ayez une erreur javascript dans votre composant de réaction. Assurez-vous que si vous utilisez une dépendance, vous utilisez le new opérateur sur la classe pour instancier la nouvelle instance. Une erreur se produira si

this.classInstance = Class({})

au lieu d’utiliser

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.

Pour moi, c’était une importation incorrecte 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 ça devrait être

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

Le répertoire Where settings contient les fichiers suivants actions.js, index.js, reducer.js.

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

Bonjour, dans mon cas, les solutions ne fonctionneront pas Mon code:

index.js

 import App from './App'; let store = createStore(App); render(      

Erreur apeares dans App.js après l’importation

 Uncaught TypeError: Cannot call a class as a function 

Si vous êtes sur Node JS et que vous voyez cette erreur dans une classe que vous avez ajoutée pour prendre en charge un test Cucumber, Cucumber essaiera automatiquement d’exécuter tout ce qui exporte une fonction et NodeJS convertit en interne une classe en fonction. .

Donc au lieu de cela:

 module.exports = MyClass; 

fais ceci:

 module.exports.MyClass = MyClass; 

Ensuite, lorsque vous l’importez dans votre fichier de pas, faites-le comme ceci:

 let MyClass = require("myclass.js").MyClass; 

De cette façon, vous n’exportez pas une fonction. Lire plus ici .