javascript - npmjs - reactjs map google




Obtendo "Não é possível chamar uma classe como uma função" no meu Projeto Reagir (20)

tl; dr

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

Mais genericamente: se sua classe parece boa, verifique se o código que a chama não tenta usá-la como uma função.

Explicação

Eu recebi este erro porque eu estava usando o React Router v4 e acidentalmente usei o suporte de render vez do component one no component <Route/> para passar meu componente que era uma classe. Isso foi um problema, porque o render espera (chama) uma função, enquanto o component é o que funcionará nos componentes do React.

Então, neste código:

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

A linha contendo o componente <Route/> deve ter sido escrita assim:

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

É uma pena, que eles não verificam e dão um erro utilizável para tal e fácil de pegar erro.

Eu estou tentando adicionar um componente de mapa React ao meu projeto, mas correr em um erro. Estou usando o post do blog do Fullstack React como referência. Eu rastreei onde o erro foi lançado 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 um mapa) quando eu comentar linhas 58-60, as últimas três linhas. edit: Eu 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 de mapa é roteado em 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'))

Aconteceu comigo porque eu usei

PropTypes.arrayOf(SomeClass)

ao invés de

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))


Eu enfrentei esse erro quando importei a classe errada e me referi ao armazenamento errado enquanto usava mobx in react-native.

Eu enfrentei o erro neste trecho:

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

@inject ("counter")
@Observer

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

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

@inject("counterStore")
@observer

O que foi realmente errado, eu estava usando a classe errada em vez de observer eu usei Observer e em vez de counterStore eu usei counter . Eu resolvi meu problema desse jeito.


Eu experimentei isso ao escrever uma declaração de importação errada 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 também corri para isso, é possível que você tenha um erro de javascript dentro de seu componente de reagir. Certifique-se de que, se estiver usando uma dependência, você está usando o new operador na classe para instanciar a nova instância. Erro será lançado se

this.classInstance = Class({})

em vez disso, use

this.classInstance = new Class({})

você verá na cadeia de erro no navegador

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

essa é a oferta que eu acredito.


Eu tive quando fiz isso:

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

corretamente:

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

ou

const foo = ...
export default foo

Isso ocorreu quando acidentalmente nomeei minha função de render 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 método de render adequado.


Na verdade todo o problema redux se conecta. soluções:

Correto :

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

Errado e Bug :

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

No meu caso eu escrevi comment no lugar de Component por 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, eu acidentalmente coloquei o nome do componente ( Home ) como o primeiro argumento para connect função enquanto ela deveria estar no final. duh.

Este com segurança me deu o erro:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

Mas este aqui funcionou com segurança:

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Oi no meu caso soluções aqui não vai funcionar Meu código:

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}/>

Erro aparece no App.js após a importação

Uncaught TypeError: Cannot call a class as a function

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 suportes. Ambos estão corretos e não serão pegos por um linter ou mais bonito ou algo similar. Demorei um pouco para rastreá-lo.


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

class MyComponent extends Component {

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

MyComponent.prototype = {

};

deveria ser

MyComponent.propTypes = {

};

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


Para mim, foi porque esqueci de usar a new palavra-chave ao configurar o estado Animado.

por exemplo:

fadeAnim: Animated.Value(0),

para

fadeAnim: new Animated.Value(0),

iria consertar isso.


Para mim, foi porque eu acidentalmente apaguei o meu método de render !

Eu tinha uma classe com um método componentWillReceiveProps que eu não precisava mais, imediatamente precedendo um método de render curto. Na minha pressa de removê-lo, eu acidentalmente removi todo o método de render também.

Este foi um DOR para rastrear, pois eu estava recebendo erros de console apontando para comentários em arquivos completamente irrelevantes como sendo a "fonte" do problema.


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

Aconteceu comigo quando não declarei o 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>;
    }
}

Principalmente esses problemas ocorrem quando você perder o componente de reagir:

import React, {Component} from 'react'

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

Tente parar você HMR e aperte npm start novamente para reconstruir seu projeto.
Isso fez com que o erro desaparecesse, não sei por quê.


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





react-router