J'obtiens "Cannot call a class as a function" dans mon projet React.

Question

J'essaie d'ajouter un composant React map à mon projet mais je me heurte à une erreur. J'utilise le composant React de Fullstack. article de blog comme référence. J'ai trouvé l'origine de l'erreur dans google_map.js ligne 83 :

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

Voici le composant de ma 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'))

Answer 1

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 avez eu, mais d'autres personnes lisant cette réponse peuvent en bénéficier, je l'espère.

Answer 2

Pour moi, c'est parce que j'ai oublié d'utiliser la fonction new lors de la mise en place de l'état animé.

eg :

fadeAnim: Animated.Value(0),

à

fadeAnim: new Animated.Value(0),

le réparerait.

Answer 3

Tl;dr

Si vous utilisez React Router v4 vérifiez votre <Route/> si vous utilisez effectivement le composant component prop pour passer votre composant React basé sur une 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 obtenu cette erreur parce que j'utilisais React Router v4 et que j'ai accidentellement utilisé l'attribut render au lieu de la component un dans le <Route/> pour passer mon composant qui était une classe. C'était un problème, car render attend (appelle) une fonction, tandis que component est celui 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 écrit comme ça :

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

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

Answer 4

Ça m'est arrivé parce que j'ai utilisé

PropTypes.arrayOf(SomeClass)

au lieu de

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Answer 5

Vous avez dupliqué export default déclaration. La première est remplacée par la seconde qui est en fait une fonction.