Obtendo “Não é possível chamar uma classe como uma função” no meu projeto React

Estou tentando adicionar um componente do mapa React ao meu projeto, mas ocorreu um erro. Estou usando Fullstack Reagir do post como uma referência. Eu localizei onde o erro é gerado na linha 83 do google_map.js:

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

Aqui está o meu componente de mapa até agora. A página carrega muito bem (sem mapa) quando eu comento as linhas 58 a 60, as últimas três linhas. edit: Fiz as alterações que @Dmitriy Nevzorov sugeriu e ainda me dá o mesmo erro.

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)

E aqui é onde esse componente do mapa é roteado no 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'))

Para mim, aconteceu quando eu esqueci de escrever extends React.Componentno final. Sei que não é exatamente o que VOCÊ teve, mas espero que outros que estejam lendo esta resposta possam se beneficiar disso.

Para mim, foi porque esqueci de usar a newpalavra - chave ao configurar o estado Animated.

por exemplo:

fadeAnim: Animated.Value(0),

para

fadeAnim: new Animated.Value(0),

iria consertar isso.

tl; dr

Se você usa o React Router v4, verifique seu <Route/>componente se realmente usa ocomponent prop para passar seu componente React baseado em classe!

De maneira mais geral: se sua classe parecer correta, verifique se o código que a chama não tenta usá-la como uma função.

Explicação

Eu recebi esse erro porque estava usando o React Router v4 e acidentalmente usei o renderprop em vez componentdaquele no <Route/>componente para passar meu componente que era uma classe. Isso foi um problema, porque renderespera (chama) uma função, enquantocomponent é a única que funcionará nos componentes do React.

Portanto, neste código:

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

A linha que contém o <Route/>componente deveria ter sido escrita assim:

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

É uma pena que eles não verifiquem e dêem um erro utilizável para tal e fácil de detectar erros.

Aconteceu comigo porque eu costumava

PropTypes.arrayOf(SomeClass)

ao invés de

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Você duplicou a export defaultdeclaração. O primeiro é substituído pelo segundo, que na verdade é uma função.

Para mim, foi em ComponentName.prototypevez de ComponentName.propTypes. auto sugerido pelo PhpstormIDE. Espero que ajude alguém.

Tive o mesmo problema, ocorreu porque minha ES6classe de componente não estava sendo estendida React.Component.

Esses problemas ocorrem principalmente quando você deixa de estender o Component ao reagir:

import React, {Component} from 'react'

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

Para mim, foi porque usei protótipo em vez de propTypes

class MyComponent extends Component {

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

MyComponent.prototype = {

};

deveria ser

MyComponent.propTypes = {

};

Post.proptypes = {

}

para

Post.propTypes = {

}

alguém deve comentar sobre como monitorar esse erro de uma maneira muito precisa.

Parece que não há um caso único quando esse erro aparece.

Aconteceu comigo quando não declarei construtor no componente statefull.

class MyComponent extends Component {

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

ao invés de

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Duas coisas que você pode verificar é:

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

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

• Certifique-se de estender React.Component
• Use propTypes em vez de prototype (conforme IDE intellisense)

Esse é um problema geral e não aparece em um único caso. Mas, o problema comum em todos os casos é que você se esquece de importum componente específico (não importa se é de uma biblioteca que você instalou ou de um componente personalizado que você criou):

import {SomeClass} from 'some-library'

Quando você o usa mais tarde, sem importá-lo, o compilador acha que é uma função. Portanto, quebra. Este é um exemplo comum:

imports

...code...

e depois em algum lugar dentro do seu código

<Image {..some props} />

Se você esqueceu de importar o componente <Image />, o compilador não reclamará como ocorre com outras importações, mas será interrompido quando atingir seu código.

Para mim, foi porque eu excluí acidentalmente meu rendermétodo!

Eu tive uma classe com um componentWillReceivePropsmétodo que não precisava mais, imediatamente precedendo um rendermétodo curto . Na minha pressa em removê-lo, removi acidentalmente todo o rendermétodo também.

Era uma PAIN para rastrear, pois eu estava recebendo erros do console apontando comentários em arquivos completamente irrelevantes como sendo a "fonte" do problema.

Eu tive um problema semelhante, estava chamando o método de renderização incorretamente

Deu um erro:

render = () => {
    ...
}

ao invés de

corrigir:

render(){
    ...
}

Eu tinha quando o fiz:

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

corretamente:

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

ou

const foo = ...
export default foo

Para mim, aconteceu porque eu não envolvi minha função de conexão corretamente e tentei exportar dois componentes padrão

Eu enfrentei esse erro quando importei a classe errada e me referi ao armazenamento errado ao usar o mobx no react-native.

Eu enfrentei um erro neste trecho:

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

@inject ("counter")
@Observer

Após algumas correções, como abaixo do snippet. Resolvi meu problema dessa maneira.

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

@inject("counterStore")
@observer

O que estava realmente errado, eu estava usando a classe errada em vez de observerusar Observere em vez de counterStoreusar counter. Resolvi meu problema dessa maneira.

No arquivo MyComponent.js

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

Eu coloquei alguma função relacionada a esse componente:

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

export myFunction() {
...
}

e depois em outro arquivo importado essa função:

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

Você consegue identificar o problema?

Esqueci o aparelho e importado MyComponentsob o nome myFunction!

Então, a correção foi:

import {myFunction} from './MyComponent'

Eu experimentei isso ao escrever uma instrução de importação incorreta ao importar uma função, em vez de uma classe. Se removeMaterialé uma função em outro módulo:

Certo:

import { removeMaterial } from './ClaimForm';

Errado:

import removeMaterial from './ClaimForm';

Eu recebi esse erro cometendo um pequeno erro. Meu erro foi exportar a classe como uma função em vez de como uma classe. Na parte inferior do meu arquivo de classe, eu tinha:

export default InputField();

quando deveria ter sido:

export default InputField;

Também deparei com isso, é possível que você tenha um erro de javascript dentro do seu componente de reação. Verifique se você está usando uma dependência, se está usando o newoperador na classe para instanciar a nova instância. Erro lançará se

this.classInstance = Class({})

em vez disso, use

this.classInstance = new Class({})

você verá na cadeia de erros no navegador

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

essa é a oferta que eu acredito.

Tente parar seu HMR e pressione npm startnovamente para reconstruir seu projeto.
Isso fez o erro desaparecer, não sei por quê.

No meu caso, eu escrevi commentno lugar de Componentpor engano

Eu acabei de escrever isso.

import React, { Component } from 'react';

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

Em vez disso.

import React, { Component } from 'react';

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

não é grande coisa, mas para um iniciante como eu é realmente confuso. Espero que isso seja útil.

No meu caso, usando JSX, um componente pai estava chamando outros componentes sem o "<>"

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

consertar

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

Outro relatório aqui: não funcionou como eu exportei:

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

ao invés de

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

Observe a posição dos colchetes. Ambos estão corretos e não serão pegos por um linter ou mais bonito ou algo semelhante. Levei um tempo para encontrá-lo.

No meu caso, acidentalmente coloquei o nome do componente ( Home) como o primeiro argumento a connectfuncionar enquanto deveria estar no final. duh.

Este - com certeza - me deu o erro:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

Mas este funcionou bem:

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Isso ocorreu quando acidentalmente nomeei minha renderfunção incorretamente:

import React from 'react';

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

Minha instância desse erro foi causada simplesmente porque minha classe não tinha um rendermétodo adequado .

Na verdade, todo o problema de redux conectar. soluções:

Correto :

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

Erro e erro :

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

Para mim, foi uma importação incorreta de um redutor no rootReducer.js. Importei contêiner em vez de arquivo redutor.

Exemplo

import settings from './pages/Settings';

Mas com certeza deve ser

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

Onde o diretório settings contém os seguintes arquivos actions.js, index.js, reducer.js.

Para verificar isso, você pode registrar os redutores arg da função assertReducerShape () no redux / es / redux.js.