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

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

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

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

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'))

Ответы

Ответ 1

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

Ответ 2

TL;DR

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

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

Описание

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

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

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

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

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

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

Ответ 3

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

например:

fadeAnim: Animated.Value(0),

к

fadeAnim: new Animated.Value(0),

исправит его.

Ответ 4

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

PropTypes.arrayOf(SomeClass)

вместо

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Ответ 5

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

import React, {Component} from 'react'

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

Ответ 9

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

class MyComponent extends Component {

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

MyComponent.prototype = {

};

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

MyComponent.propTypes = {

};

Ответ 10

Post.proptypes = {

}

в

Post.propTypes = {

}

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

Ответ 11

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

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

class MyComponent extends Component {

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

вместо

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Ответ 12

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

import {SomeClass} from 'some-library'

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

imports

...code...

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

<Image {..some props}/>

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

Ответ 13

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

Возникла ошибка:

render = () => {
    ...
}

вместо

правильный:

render(){
    ...
}

Ответ 14

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

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

правильно:

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

или же

const foo = ...
export default foo

Ответ 15

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

Ответ 16

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

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

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

@inject ("counter")
@Observer

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

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

@inject("counterStore")
@observer

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

Ответ 17

В файле 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'

Ответ 18

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

Правильно:

import { removeMaterial } from './ClaimForm';

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

import removeMaterial from './ClaimForm';

Ответ 19

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

export default InputField();

когда это должно было быть:

export default InputField;

Ответ 20

Для меня это произошло потому, что я случайно удалил мой метод render!

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

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

Ответ 21

Я также столкнулся с этим, возможно, у вас есть ошибка javascript внутри вашего реагирующего компонента. Убедитесь, что вы используете зависимость, которую используете оператор new в классе, чтобы создать экземпляр нового экземпляра. Ошибка будет выдаваться, если

this.classInstance = Class({})

вместо этого используйте

this.classInstance = new Class({})

вы увидите в цепочке ошибок в браузере

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

вот что я считаю верным.

Ответ 22

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

Ответ 23

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

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

import React, { Component } from 'react';

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

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

import React, { Component } from 'react';

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

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

Ответ 24

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

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

фиксировать

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

Ответ 25

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

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

вместо

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

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

Ответ 26

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

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

export default connect(Home)(mapStateToProps, mapDispatchToProps)

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

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Ответ 27

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

import React from 'react';

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

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

Ответ 28

Собственно все проблемы редукса связаны. решения:

Исправить:

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

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

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

Ответ 29

Вы можете проверить две вещи:

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

Slider.prototypes = {
    // accessibility: PropTypes.bool,
}
  • Убедитесь, что вы расширяете React.Component
  • Используйте прототипы вместо прототипа (согласно IDE intellisense)

Ответ 30

Для меня это был неправильный импорт редуктора в rootReducer.js. Я импортировал контейнер вместо файла редуктора.

пример

import settings from './pages/Settings';

Но уверен, что это должно быть

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

Где каталог настроек содержит следующие файлы: actions.js, index.js, reducer.js.

Чтобы проверить это, вы можете записать арг редукторов функции assertReducerShape() в файл redux/es/redux.js.