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

Я пытаюсь добавить Реагировать карту функцию _classCallCheck ( экземпляр , Constructor ) { если ((! Экземпляр InstanceOf Конструктора )) { бросить новый TypeError ( «Не может вызвать класс как функция» ); } } для моего проекта, но ошибка. Я использую Fullstack РЕАКТА импорт Реагировать из «реагировать» на импорте GoogleApiComponent от «Google-карты реагировать» на экспорт класс LocationsContainer расширяет React , Компонент { конструктор () { супер () } визуализации () { константный стиль = { ширина : '100vw' , высота : '100vh' } возвращение ( < DIV стиль = { стиль }> < Карта Google = { это . Реквизита . Google } /> </ div > ) } } класс экспорта Map extends React . Компонент { componentDidUpdate ( prevProps , prevState ) { if ( prevProps . Google ! == this . Props . Google ) { this . loadMap (); } } componentDidMount () { this . loadMap (); } loadMap () { if ( this . props && this . props . google ) { const { google } = this . реквизит ; const maps = google . карты ; const mapRef = this . refs . карта ; const node = ReactDOM . findDOMNode ( mapRef ); пусть zoom = 14 ; let lat = 37.774929 let lng = 122.419416 const center = новые карты . LatLng ( lat , lng ); const mapConfig = Объект . присвойте ({}, { center : center , zoom : zoom }) это . map = новые карты . Map ( node , mapConfig ) } } render () { return ( < div ref = 'map' > Загрузка карты ... </ div > ) } } экспорт по умолчанию GoogleApiComponent ({ apiKey : MY_API_KEY }) ( LocationsContainer ) / # -map-container- import { render } из 'response-dom' ; import React from 'react' ; импорт художников из './components/Artists' импорта { Router , Route , Link , browserHistory } от 'реагировать-маршрутизатор' импорта Home из ' ./components/HomePage ' импорта Галерея из ' './components/ArtGallery импорта ArtistPage из ' ./components/ArtistPage ' импортирует FavsPage из ' ./components/FavsPage ' import LocationsContainer из ' ./components/Locations ' // Создает рендеринг конфигурации маршрута (( < История маршрутизатора = { browserHistory }> < Route path = "/" component = { Главная } /> < Route path = "locations" component = { LocationsContainer } /> < Route path = "artist" component = { Artists } /> < Route path = "gallery" component = { Gallery } /> < Route path = "избранное " component = { FavsPage } /> < Route path = ": artistName " component = { ArtistPage } /> </ Router > ), документ . getElementById ( 'app' )) "rel =" noreferrer "> сообщение в блоге как ссылка. Я обнаружил, где ошибка попадает в строку google_map.js 83:

extends React.Component

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

<Route/>

И вот здесь этот компонент карты маршрутизируется в main.js:

component

javascript,google-maps,reactjs,ecmascript-6,react-router,

62

Ответов: 23

111

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

39

tl; dr

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

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

объяснение

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

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

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

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

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

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

ов за 24

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

например:

fadeAnim: Animated.Value(0),

в

fadeAnim: new Animated.Value(0),

исправит это.

22

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

PropTypes.arrayOf(SomeClass)

вместо

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

8 ов

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

JavaScript, Google-карты, reactjs, ECMAScript-6, реагируют-маршрутизатор,
Похожие вопросы
Яндекс.Метрика