it-swarm.com.ru

Получение "Невозможно вызвать класс как функцию" в моем проекте React

Я пытаюсь добавить компонент карты React в свой проект, но столкнулся с ошибкой. Я использую Fullstack React's сообщение в блоге в качестве ссылки. Я обнаружил, где в строке google_map.js 83 появляется ошибка:

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

Вот мой компонент карты до сих пор. Страница загружается очень хорошо (без карты), когда я закомментирую строки 58-60, последние три строки. редактировать: я сделал изменения, которые предложил Дмитрий Невзоров, и он все еще дает мне ту же ошибку.

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)

И вот где этот компонент карты направляется в 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'))
98
Mike Fleming

Для меня это произошло, когда я забыл написать extends React.Component в конце .. Я знаю, что это не совсем то, что вы имели, но другие, читающие этот ответ, могут извлечь выгоду из этого, надеюсь.

147
programmer

тЛ; др

Если вы используете React Router v4, проверьте ваш компонент <Route/>, если вы действительно используете опору component для передачи вашего компонента React на основе классов!

В более общем плане: если ваш класс выглядит нормально, проверьте, не вызывает ли код, который его вызывает, функцию в качестве функции.

Объяснение

Я получил эту ошибку, потому что я использовал React Router v4, и я случайно использовал опору render вместо component в компоненте <Route/> для передачи моего компонента, который был классом. Это было проблемой, потому что render ожидает (вызывает) функцию, в то время как component будет работать с компонентами React.

Итак, в этом коде:

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

Строка, содержащая компонент <Route/>, должна была быть написана так:

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

Обидно, что они не проверяют это и дают полезную ошибку для такой и легко поддающейся обнаружению ошибки.

53
totymedli

Для меня это было потому, что я забыл использовать ключевое слово new при настройке анимированного состояния.

например:

fadeAnim: Animated.Value(0),

в

fadeAnim: new Animated.Value(0),

бы исправить это.

41
William Park

Случилось со мной, потому что я использовал

PropTypes.arrayOf(SomeClass)

вместо

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

35
Dan Balaban

Вы дублировали объявление export default. Первый переопределяется вторым, который на самом деле является функцией. 

9
Dmitriy Nevzorov

У меня возникла та же проблема, потому что мой класс компонента ES6 не расширял React.Component.

8
Jam

Для меня это был ComponentName.prototype вместо ComponentName.propTypes. Auto, предложенный Phpstorm IDE. Надеюсь, это кому-нибудь поможет.

7
codersaif

В основном эти проблемы возникают, когда вы пропускаете расширение Component от реакции:

import React, {Component} from 'react'

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

Для меня это было потому, что я использовал прототип вместо propTypes

class MyComponent extends Component {

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

MyComponent.prototype = {

};

это должно быть 

MyComponent.propTypes = {

};
4
Onengiye Richard
Post.proptypes = {

}

в

Post.propTypes = {

}

кто-то должен прокомментировать, как очень точно отслеживать такую ​​ошибку.

2
Mbanda

Похоже, нет ни одного случая, когда эта ошибка появляется.

Случилось со мной, когда я не объявил конструктор в компоненте statefull.

class MyComponent extends Component {

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

вместо

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Я столкнулся с этой ошибкой, когда импортировал неправильный class и сослался на неправильный store при использовании mobx в реагировать на нативный.

Я столкнулся с ошибкой в ​​этом фрагменте:

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

@inject ("counter")
@Observer

После нескольких исправлений, как показано ниже фрагмент. Я решил свою проблему следующим образом.

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

@inject("counterStore")
@observer

Что было на самом деле неправильно, я использовал неправильный класс вместо observer Я использовал Observer и вместо counterStore я использовал counter. Я решил свою проблему таким образом.

1
badarshahzad

Для меня это произошло потому, что я неправильно упаковал свою функцию соединения и попытался экспортировать два компонента по умолчанию

1
Dmitriy

У меня было это когда я так делал:

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

правильно:

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

или же

const foo = ...
export default foo
1
Jeka Yaroshenko

У меня была похожая проблема, я неправильно вызывал метод рендеринга

Дал ошибку:

render = () => {
    ...
}

вместо

правильный: 

render(){
    ...
}
1
Emile Esterhuizen

В файле MyComponent.js

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

Я поставил некоторые функции, связанные с этим компонентом:

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

export myFunction() {
...
}

а затем в другом файле импортируется эта функция:

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

Можете ли вы определить проблему?

Я забыл фигурные скобки и импортировал MyComponent под именем myFunction!

Итак, исправление было:

import {myFunction} from './MyComponent'
1
Mike

В моем случае при использовании JSX родительский компонент вызывал другие компоненты без "<>"

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

фиксировать 

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

Для меня это было потому, что я случайно удалил свой метод render!

У меня был класс с методом componentWillReceiveProps, который мне больше не нужен, непосредственно перед коротким методом render. В спешке, удалив его, я случайно удалил и весь метод render.

Это былоPAIN, чтобы отследить, так как я получал консольные ошибки, указывающие на комментарии в совершенно не относящихся к делу файлах как на «источник» проблемы.

0
Alex McMillan

Я испытал это, когда неправильно писал оператор импорта при импорте функции, а не класса. Если removeMaterial - функция в другом модуле:

Правильно:

import { removeMaterial } from './ClaimForm';

Неправильно:

import removeMaterial from './ClaimForm';
0
shacker

Это общая проблема, и она не появляется ни в одном случае. Но общая проблема во всех случаях заключается в том, что вы забыли import определенный компонент (не имеет значения, установлен ли он из библиотеки, которую вы установили, или из пользовательского компонента, который вы создали):

import {SomeClass} from 'some-library'

Когда вы используете его позже, не импортируя его, компилятор считает, что это функция. Поэтому и ломается. Это общий пример:

imports

...code...

а потом где-то внутри вашего кода

<Image {..some props} />

Если вы забыли импортировать компонент <Image />, то компилятор не будет жаловаться так же, как и для других импортов, но прекратит работу, когда достигнет вашего кода.

0
Tim G. Pegas

В моем случае я написал comment вместо Component по ошибке

Я только что написал это.

import React, { Component } from 'react';

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

Вместо этого.

import React, { Component } from 'react';

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

это не имеет большого значения, но для новичка, как я, это действительно сбивает с толку ... Я надеюсь, что это будет полезно.

0
Uddesh_jain

Попробуйте остановить HMR и снова нажать npm start, чтобы перестроить ваш проект.
Это, сделал ошибку, чтобы исчезнуть, не знаю почему. 

0
Alexander Gorelik

Другой отчет здесь: он не работал, когда я экспортировал: 

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

вместо 

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

Обратите внимание на положение скобок. Оба являются правильными и не будут пойманы ни линтером, ни красивее, ни чем-то подобным. Мне понадобилось время, чтобы выследить это. 

0
Sebastijan Dumančić

Это произошло, когда я случайно назвал свою функцию render неправильно:

import React from 'react';

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

Мой экземпляр этой ошибки был вызван просто потому, что в моем классе не было правильного метода render.

0
Bryan Bor

В моем случае я случайно поместил имя компонента (Home) в качестве первого аргумента функции connect, когда он должен был находиться в конце. Дух.

Этот, безусловно, дал мне ошибку:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

Но этот работал - конечно, - хорошо:

export default connect(mapStateToProps, mapDispatchToProps)(Home)
0
scaryguy