Obtener "No se puede llamar a una clase como una función" en mi proyecto React

Estoy tratando de agregar un componente de mapa React a mi proyecto pero me encuentro con un error. Estoy usando la publicación de blog de Fullstack React como referencia. Rastreé dónde se arroja el error en google_map.js línea 83:

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

Aquí está mi componente de mapa hasta ahora. La página se carga muy bien (sin un mapa) cuando comento las líneas 58-60, las últimas tres líneas. editar: hice los cambios que @Dmitriy Nevzorov sugirió y todavía me da el mismo error.

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)

Y aquí es donde este componente del mapa se enruta en 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 mí sucedió cuando olvidé escribir extends React.Componental final. Sé que no es exactamente lo que USTED tenía, pero espero que otros que lean esta respuesta puedan beneficiarse de esto.

Para mí fue porque olvidé usar la newpalabra clave al configurar el estado animado.

p.ej:

fadeAnim: Animated.Value(0),

a

fadeAnim: new Animated.Value(0),

Lo arreglaría.

tl; dr

Si usa React Router v4, verifique su <Route/>componente si realmente usa elcomponent accesorio para pasar su componente React basado en su clase.

En términos más generales: si su clase parece estar bien, verifique si el código que la llama no intenta usarla como una función.

Explicación

Recibí este error porque estaba usando React Router v4 y accidentalmente usé el renderaccesorio en lugar del componentque estaba en el <Route/>componente para pasar mi componente que era una clase. Este fue un problema, porque renderespera (llama) una función, mientras que componentes la que funcionará en los componentes React.

Entonces en este código:

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

La línea que contiene el <Route/>componente, debería haberse escrito así:

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

Es una pena que no lo verifiquen y den un error útil para un error tan fácil de detectar.

Me pasó porque solía

PropTypes.arrayOf(SomeClass)

en vez de

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Has duplicado la export defaultdeclaración. El primero se anula por el segundo, que en realidad es una función.

Para mí, fue en ComponentName.prototypelugar de ComponentName.propTypes. auto sugerido por PhpstormIDE. Espero que ayude a alguien.

Experimenté el mismo problema, ocurrió porque mi ES6clase de componente no se extendía React.Component.

En su mayoría, estos problemas se producen cuando se omite extender Componente desde la reacción:

import React, {Component} from 'react'

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

Para mí fue porque usé prototipos en lugar de propTypes

class MyComponent extends Component {

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

MyComponent.prototype = {

};

deberia ser

MyComponent.propTypes = {

};

Post.proptypes = {

}

a

Post.propTypes = {

}

alguien debería comentar cómo monitorear dicho error de una manera muy precisa.

Parece que no hay un solo caso cuando aparece este error.

Me sucedió cuando no declaró el constructor en el componente statefull.

class MyComponent extends Component {

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

en vez de

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Dos cosas que puedes verificar es,

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

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

• Asegúrate de extender React.Component
• Use propTypes en lugar de prototipo (según IDE intellisense)

Este es un problema general y no aparece en un solo caso. Pero, el problema común en todos los casos es que se olvida de importun componente específico (no importa si es de una biblioteca que instaló o de un componente personalizado que creó):

import {SomeClass} from 'some-library'

Cuando lo usa más tarde, sin importarlo, el compilador cree que es una función. Por lo tanto, se rompe. Este es un ejemplo común:

imports

...code...

y luego en algún lugar dentro de tu código

<Image {..some props} />

Si olvidó importar el componente <Image />, el compilador no se quejará como lo hace para otras importaciones, pero se interrumpirá cuando llegue a su código.

¡Para mí, fue porque accidentalmente eliminé mi rendermétodo!

Tuve una clase con un componentWillReceivePropsmétodo que ya no necesitaba, inmediatamente antes de un rendermétodo corto . En mi apuro por eliminarlo, también eliminé accidentalmente todo el rendermétodo.

Este fue un DOLOR para rastrear, ya que recibía errores de consola que apuntaban a comentarios en archivos completamente irrelevantes como la "fuente" del problema.

Tuve un problema similar, estaba llamando al método de renderizado incorrectamente

Dio un error:

render = () => {
    ...
}

en vez de

correcto:

render(){
    ...
}

Lo tuve cuando lo hice:

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

correctamente:

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

o

const foo = ...
export default foo

Para mí sucedió porque no envolví mi función de conexión correctamente e intenté exportar dos componentes predeterminados

Enfrenté este error cuando importé la clase incorrecta y me referí a la tienda incorrecta mientras usaba mobx en react-native.

Me enfrenté a un error en este fragmento:

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

@inject ("counter")
@Observer

Después de algunas correcciones como el fragmento de abajo. Resolví mi problema de esta manera.

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

@inject("counterStore")
@observer

Lo que realmente estaba mal, estaba usando la clase incorrecta en lugar de lo observerque usé Observery en lugar de lo counterStoreque usé counter. Resolví mi problema de esta manera.

En archivo MyComponent.js

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

Pongo alguna función relacionada con ese componente:

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

export myFunction() {
...
}

y luego en otro archivo importado esa función:

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

¿Puedes detectar el problema?

¡Olvidé las llaves, e importé MyComponentbajo nombre myFunction!

Entonces, la solución fue:

import {myFunction} from './MyComponent'

Experimenté esto cuando escribí una declaración de importación incorrecta al importar una función, en lugar de una clase. SiremoveMaterial es una función en otro módulo:

Correcto:

import { removeMaterial } from './ClaimForm';

Incorrecto:

import removeMaterial from './ClaimForm';

Recibí este error cometiendo un pequeño error. Mi error fue exportar la clase como una función en lugar de como una clase. Al final de mi archivo de clase tenía:

export default InputField();

cuando debería haber sido:

export default InputField;

También me he encontrado con esto, es posible que tenga un error de JavaScript dentro de su componente de reacción. Asegúrese de que si está utilizando una dependencia, está utilizando el newoperador de la clase para crear una instancia de la nueva instancia. Se lanzará un error si

this.classInstance = Class({})

en su lugar use

this.classInstance = new Class({})

verá en la cadena de error en el navegador

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

ese es el sorteo, creo.

Intenta detener tu HMR y presiona npm startnuevamente para reconstruir tu proyecto.
Esto, hizo que el error desapareciera, no sé por qué.

En mi caso escribí commenten lugar de Componentpor error

Acabo de escribir esto.

import React, { Component } from 'react';

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

En lugar de esto.

import React, { Component } from 'react';

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

no es gran cosa, pero para un principiante como yo es realmente confuso. Espero que esto sea útil.

En mi caso, usando JSX un componente padre estaba llamando a otros componentes sin el "<>"

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

reparar

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

Otro informe aquí: no funcionó como exporté:

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

en vez de

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

Tenga en cuenta la posición de los soportes. Ambos son correctos y no serán atrapados por un linter o más bonito o algo similar. Me llevó un tiempo localizarlo.

En mi caso, accidentalmente puse el nombre del componente ( Home) como primer argumento paraconnect funcionar mientras se suponía que debía estar al final. duh

Este, seguramente, me dio el error:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

Pero este funcionó, seguramente, bien:

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Esto ocurrió cuando accidentalmente puse un nombre renderincorrecto a mi función:

import React from 'react';

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

Mi instancia de este error simplemente fue causada porque mi clase no tenía un rendermétodo adecuado .

En realidad todo el problema redux connect. soluciones:

Correcto :

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

Mal y error :

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

Para mí fue una importación incorrecta de un reductor en rootReducer.js. Importé el contenedor en lugar del archivo reductor.

Ejemplo

import settings from './pages/Settings';

Pero seguro que debería ser

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

Donde el directorio de configuración contiene los siguientes archivos actions.js, index.js, reducer.js.

Para verificarlo, puede registrar los reductores arg de la función afirmarReducerShape () desde redux / es / redux.js.