Se mettre “Ne peut pas appeler à une classe de fonction” dans mon Réagir Projet

tl;dr

Si vous utilisez Réagir Routeur v4 vérifier votre <Route/> composant si vous avez, en effet, utiliser le component prop passer votre classe de Réagir composant!

Plus généralement: Si votre classe semble ok, vérifier si le code qui l'appelle, il n'essayez pas de l'utiliser comme une fonction.

Explication

J'ai eu cette erreur parce que j'ai été en utilisant Réagir Routeur v4 et j'ai accidentellement utilisé le render prop à la place de la component un dans le <Route/> composant de passer mon composant qui a une classe. C'était un problème, parce que render attend (appels) une fonction, tandis que component est celui qui va travailler sur Réagir composants.

Donc dans ce code:

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

La ligne contenant le <Route/> composant, doit avoir été écrit comme ceci:

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

C'est une honte, qu'ils n'ont pas le vérifier et de donner un utilisable erreur et facile à attraper erreur.

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

PropTypes.arrayOf(SomeClass)

au lieu de

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

J'ai connu le même problème, il s'est produit parce que mon ES6 classe de composant a été fait de ne pas étendre React.Component.

La plupart de ces problèmes se produisent lorsque vous manquez d'étendre Composant de réagir:

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

Post.proptypes = {
}

à

Post.propTypes = {
}

quelqu'un doit faire des commentaires sur la façon de surveiller une telle erreur dans une manière très précise.

J'ai eu un problème similaire, j'ai été d'appeler la méthode render de manière incorrecte

A donné une erreur:

render = () => {
...
}

au lieu de

correct:

render(){
...
}

Pour moi, c'est arrivé parce que je n'ai pas à me connecter fonctionner correctement, et essayé d'exportation par défaut, à deux composants

Dans le fichier MyComponent.js

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

J'ai mis une fonction liée à la composante:

export default class MyComponent extends React.Component {
...
}
export myFunction() {
...
}

et puis dans un autre fichier importé en 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és MyComponent sous le nom myFunction!

Donc, la solution était:

import {myFunction} from './MyComponent'

Pour moi, c'était parce que j'avais accidentellement supprimé mon render méthode !

J'ai eu une classe avec un componentWillReceiveProps méthode que je n'ai pas besoin de plus, précédant immédiatement un court render méthode. Dans ma hâte de l'enlever, j'ai accidentellement supprimé l'ensemble de la render méthode.

C'était un DOULEUR à suivre, comme je l'ai été d'obtenir les erreurs de la console de pointer les commentaires complètement hors de propos fichiers comme étant la "source" du problème.

Dans mon cas, j'ai écrit comment en place de Component par erreur

Je viens d'écrire cela.

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

c'est pas une grosse affaire, mais pour un débutant comme moi, c'est vraiment déroutant.
J'espère que ce sera utile.

Un autre rapport ici: Il n'a pas fonctionné comme je l'ai exporté:

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

au lieu de

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

Noter la position des crochets. Les deux sont corrects et ne pas se faire attraper par un linter ou plus joli ou quelque chose de similaire. M'a fallu du temps pour le retrouver.

Cétait quand j'ai accidentellement appelé mon render fonction incorrecte:

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

Mon exemple de cette erreur a été causés simplement parce que ma classe n'ont pas un bon render méthode.

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

Corriger:

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

Mal & Bug:

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

Pour moi c'était un faux importation d'un réducteur dans le rootReducer.js. J'ai importé le contenant plutôt que le réducteur de fichier.

Exemple

import settings from './pages/Settings';

Mais assurez-vous qu'il devrait être

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

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

Pour le vérifier, vous pouvez vous connecter réducteurs de l'argument de la assertReducerShape() la fonction de l'redux/es/redux.js.

Salut dans mon cas, les solutions ne fonctionnent pas
Mon code:

index.js

import App from './App';
let store = createStore(App);
render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" name='Strona główna' component={App}>
<IndexRoute name='' component={Welcome}/>
<Route name='Dashboard' path="dashboard" component={ReatEstateList}/>

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

Uncaught TypeError: Cannot call a class as a function