내 React 프로젝트에서 "클래스를 함수로 호출 할 수 없음"이 표시됨

프로젝트에 React 맵 구성 요소를 추가하려고하는데 오류가 발생합니다. 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 줄을 주석 처리하면 페이지가 잘로드됩니다 (지도없이). 편집 : @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'))

나에게 그것은 내가 extends React.Component마지막 에 쓰는 것을 잊었을 때 일어났다 . 나는 그것이 정확히 당신이 가진 것이 아니라는 것을 알고 있지만이 답변을 읽는 다른 사람들은 이것으로부터 이익을 얻을 수 있기를 바랍니다.

나를 위해 사용하는 것을 잊었 기 때문에 new 애니메이션 상태를 설정할 때 키워드 입니다.

예 :

fadeAnim: Animated.Value(0),

에

fadeAnim: new Animated.Value(0),

그것을 고칠 것입니다.

tl; dr

React Router v4를 <Route/>사용하는 경우 실제로component prop을 하여 클래스 기반 React 구성 요소를 전달 !

더 일반적으로 : 클래스가 괜찮아 보이면 클래스를 호출하는 코드가이를 함수로 사용하지 않는지 확인하십시오.

설명

나는 내가 사용했기 때문에이 오류가 발생했습니다 라우터 V4를 반응 실수로 사용 된 render소품 대신 component한 <Route/>수업이었다 내 구성 요소를 전달하는 구성 요소를. 이것은 render함수를 기대 (호출)하고 componentReact 컴포넌트에서 작동 하는 함수 이기 때문에 문제였습니다 .

따라서이 코드에서 :

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

<Route/>구성 요소를 포함하는 줄 은 다음과 같이 작성되어야합니다.

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

그들이 그것을 확인하지 않고 그렇게하고 잡기 쉬운 실수에 대해 사용 가능한 오류를 제공하는 것은 부끄러운 일입니다.

내가 사용했기 때문에 나에게 일어난

PropTypes.arrayOf(SomeClass)

대신에

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

중복 된 export default신고가 있습니다. 첫 번째는 실제로 함수 인 두 번째로 대체됩니다.

나를 위해, 그것은이었다 ComponentName.prototype대신 ComponentName.propTypes. PhpstormIDE에서 자동 제안 . 누군가를 도울 수 있기를 바랍니다.

동일한 문제가 발생했습니다 . ES6구성 요소 클래스가 확장되지 않았기 때문에 발생했습니다 React.Component.

대부분의 문제 는 react에서 Component 확장을 놓칠 때 발생합니다 .

import React, {Component} from 'react'

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

저에게는 propTypes 대신 프로토 타입을 사용했기 때문입니다 .

class MyComponent extends Component {

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

MyComponent.prototype = {

};

그것은되어야한다

MyComponent.propTypes = {

};

Post.proptypes = {

}

에

Post.propTypes = {

}

누군가는 그러한 오류를 매우 정확하게 모니터링하는 방법에 대해 언급해야합니다.

이 오류가 표시되는 단일 케이스가없는 것 같습니다.

statefull 구성 요소에서 생성자를 선언하지 않았을 때 발생했습니다.

class MyComponent extends Component {

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

대신에

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

확인할 수있는 두 가지는

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

Slider.propTypes = {
    // accessibility: PropTypes.bool,
}

• React.Component 를 확장했는지 확인하십시오.
• 사용 propTypes 대신 프로토 타입 (IDE 인텔리 당)

이것은 일반적인 문제이며 한 가지 경우에 나타나지 않습니다. 그러나 모든 경우의 일반적인 문제 import는 특정 구성 요소 를 잊어 버린다는 것입니다 (설치 한 라이브러리에서 가져온 것인지 아니면 사용자가 만든 사용자 정의 구성 요소에서 가져온 것인지는 중요하지 않음).

import {SomeClass} from 'some-library'

나중에 가져 오지 않고 사용할 때 컴파일러는 함수라고 생각합니다. 따라서 깨집니다. 다음은 일반적인 예입니다.

imports

...code...

그런 다음 코드 내부 어딘가에

<Image {..some props} />

컴포넌트를 임포트하는 것을 잊었다면 <Image />컴파일러는 다른 임포트와 같이 불평하지 않지만 코드에 도달하면 중단됩니다.

저에게는 실수로 render방법을 삭제했기 때문입니다 !

componentWillReceiveProps더 이상 필요하지 않은 render메서드 가 짧은 메서드 바로 앞에 있는 클래스가 있습니다. 서둘러 제거하면서 실수로 전체 render방법도 제거했습니다 .

문제의 "원본"인 완전히 관련없는 파일의 주석을 가리키는 콘솔 오류가 발생했기 때문에 추적해야 할 고통 이었습니다.

렌더링 메서드를 잘못 호출 한 비슷한 문제가 발생했습니다.

오류가 발생했습니다.

render = () => {
    ...
}

대신에

옳은:

render(){
    ...
}

내가 그렇게했을 때 가지고 있었다.

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

바르게:

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

또는

const foo = ...
export default foo

나에게는 연결 기능을 올바르게 래핑하지 않고 기본 두 구성 요소를 내보내려고했기 때문에 발생했습니다.

반응 네이티브에서 mobx를 사용하는 동안 잘못된 클래스를 가져 오고 잘못된 저장소 를 참조 할 때이 오류가 발생했습니다 .

이 스 니펫에서 오류가 발생했습니다.

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

@inject ("counter")
@Observer

아래 스 니펫과 같은 몇 가지 수정 후. 이런 식으로 문제를 해결했습니다.

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

@inject("counterStore")
@observer

어떻게 내가 대신 잘못된 클래스를 사용했는데, 실제로 잘못 했어 observer내가 사용 Observer하고 대신 counterStore내가 사용 counter. 나는 이런 식으로 내 문제를 해결했습니다.

파일에서 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'

클래스가 아닌 함수를 가져 오는 동안 잘못된 import 문을 작성할 때 이것을 경험했습니다. removeMaterial다른 모듈의 함수 인 경우 :

권리:

import { removeMaterial } from './ClaimForm';

잘못된:

import removeMaterial from './ClaimForm';

작은 실수를해서이 오류를 받았습니다. 내 오류는 클래스가 아닌 함수로 클래스를 내보내는 것입니다. 내 수업 파일의 맨 아래에는 다음이 있습니다.

export default InputField();

그랬어 야 할 때 :

export default InputField;

나는 또한 이것에 부딪 혔으며 반응 구성 요소 내부에 자바 스크립트 오류가있을 수 있습니다. 종속성을 사용 new중인 경우 클래스 에서 연산자를 사용 하여 새 인스턴스를 인스턴스화하고 있는지 확인하십시오 . 다음과 같은 경우 오류가 발생합니다.

this.classInstance = Class({})

대신 사용

this.classInstance = new Class({})

브라우저의 오류 체인에서 볼 수 있습니다.

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

그것이 내가 믿는 경품입니다.

HMR을 중지하고 npm start다시 눌러 프로젝트를 다시 빌드하십시오.
이로 인해 오류가 사라지고 이유를 모릅니다.

제 경우에는 실수 comment로 대신 썼습니다Component

방금 썼어요.

import React, { Component } from 'react';

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

이 대신.

import React, { Component } from 'react';

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

큰 문제는 아니지만 저 같은 초보자에게는 정말 헷갈립니다. 도움이 되길 바랍니다.

제 경우에는 JSX를 사용하여 부모 구성 요소가 "<>"없이 다른 구성 요소를 호출했습니다.

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

고치다

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

여기에 또 다른 보고서 : 내 보낸대로 작동하지 않았습니다.

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

대신에

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

대괄호의 위치를 ​​확인하십시오. 둘 다 정확하며 린 터나 더 예쁘거나 비슷한 것에 잡히지 않습니다. 그것을 추적하는 데 시간이 걸렸습니다.

제 경우 에는 마지막에 있어야하는 동안 실수로 구성 요소 이름 ( Home)을 connect함수 의 첫 번째 인수 로 넣었습니다 . 이런.

이것은 확실히 나에게 오류를 주었다.

export default connect(Home)(mapStateToProps, mapDispatchToProps)

그러나 이것은 확실히 잘 작동했습니다.

export default connect(mapStateToProps, mapDispatchToProps)(Home)

실수로 render함수 이름을 잘못 지정했을 때 발생했습니다 .

import React from 'react';

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

이 오류의 내 인스턴스는 내 클래스에 적절한 render메서드 가 없기 때문에 발생했습니다 .

실제로 모든 문제 redux 연결. 솔루션 :

정답 :

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

잘못 및 버그 :

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

저에게는 rootReducer.js에서 감속기를 잘못 가져 왔습니다. 감속기 파일 대신 컨테이너를 가져 왔습니다.

예

import settings from './pages/Settings';

하지만 확실히해야

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

설정 디렉토리에는 actions.js, index.js, reducer.js 파일이 있습니다.

이를 확인하기 위해 redux / es / redux.js에서 assertReducerShape () 함수의 감속기 인수를 기록 할 수 있습니다.