Mendapatkan "Tidak dapat memanggil kelas sebagai fungsi" di Proyek Bereaksi saya

Saya mencoba menambahkan komponen Peta Bereaksi untuk proyek saya tetapi mengalami kesalahan. Saya menggunakan posting blog Fullstack React sebagai referensi. Saya melacak di mana kesalahan dilemparkan ke google_map.js baris 83:

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

Ini adalah komponen peta saya sejauh ini. Halaman dimuat dengan baik (tanpa peta) ketika saya mengomentari baris 58-60, tiga baris terakhir. sunting: Saya membuat perubahan yang disarankan @Dmitriy Nevzorov dan itu masih memberi saya kesalahan yang sama.

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)

Dan di sinilah komponen peta ini dialihkan ke 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'))

Bagi saya itu terjadi ketika saya lupa menulis extends React.Componentdi akhir. Saya tahu itu bukan apa yang ANDA miliki, tetapi orang lain yang membaca jawaban ini dapat mengambil manfaat dari ini, semoga.

Bagi saya itu karena saya lupa menggunakan newkata kunci saat mengatur status Animasi.

misalnya:

fadeAnim: Animated.Value(0),

untuk

fadeAnim: new Animated.Value(0),

akan memperbaikinya.

tl; dr

Jika Anda menggunakan React Router v4 periksa <Route/>komponen Anda jika Anda memang menggunakan componentprop untuk melewati komponen Bereaksi berbasis kelas Anda!

Secara umum: Jika kelas Anda tampak ok, periksa apakah kode yang memanggilnya tidak mencoba menggunakannya sebagai fungsi.

Penjelasan

Saya mendapat kesalahan ini karena saya menggunakan React Router v4 dan saya tidak sengaja menggunakan renderprop bukan yang componentada di <Route/>komponen untuk melewati komponen saya yang merupakan kelas. Ini adalah masalah, karena rendermengharapkan (panggilan) suatu fungsi, sedangkan componentyang akan bekerja pada komponen Bereaksi.

Jadi dalam kode ini:

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

Baris yang berisi <Route/>komponen, seharusnya ditulis seperti ini:

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

Sangat memalukan, bahwa mereka tidak memeriksanya dan memberikan kesalahan yang dapat digunakan untuk kesalahan tersebut dan mudah ditangkap.

Terjadi pada saya karena saya dulu

PropTypes.arrayOf(SomeClass)

dari pada

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Anda memiliki duplikat export defaultdeklarasi. Yang pertama dikesampingkan oleh yang kedua yang sebenarnya merupakan fungsi.

Bagi saya, itu ComponentName.prototypebukan ComponentName.propTypes. otomatis disarankan oleh PhpstormIDE. Semoga ini bisa membantu seseorang.

Saya mengalami masalah yang sama, itu terjadi karena ES6kelas komponen saya tidak meluas React.Component.

Sebagian besar masalah ini terjadi ketika Anda tidak dapat memperluas Komponen dari reaksi:

import React, {Component} from 'react'

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

Bagi saya itu karena saya menggunakan prototipe alih-alih propTip

class MyComponent extends Component {

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

MyComponent.prototype = {

};

seharusnya begitu

MyComponent.propTypes = {

};

Post.proptypes = {

}

untuk

Post.propTypes = {

}

seseorang harus mengomentari cara memantau kesalahan semacam itu dengan cara yang sangat tepat.

Sepertinya tidak ada kasus tunggal saat kesalahan ini muncul.

Terjadi pada saya ketika saya tidak mendeklarasikan konstruktor dalam komponen statefull.

class MyComponent extends Component {

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

dari pada

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Dua hal yang dapat Anda periksa adalah,

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

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

• Pastikan Anda meluas React.Component
• Gunakan propTypes alih-alih prototipe (sesuai IDE intellisense)

Ini adalah masalah umum, dan tidak muncul dalam satu kasus. Namun, masalah umum dalam semua kasus adalah Anda lupa importkomponen tertentu (tidak masalah apakah itu dari perpustakaan yang Anda instal atau komponen yang dibuat khusus yang Anda buat):

import {SomeClass} from 'some-library'

Ketika Anda menggunakannya nanti, tanpa mengimpornya, kompiler berpikir itu adalah fungsi. Karena itu rusak. Ini adalah contoh umum:

imports

...code...

dan kemudian di suatu tempat di dalam kode Anda

<Image {..some props} />

Jika Anda lupa mengimpor komponen <Image />maka kompiler tidak akan mengeluh seperti itu untuk impor lainnya, tetapi akan rusak ketika mencapai kode Anda.

Bagi saya, itu karena saya tidak sengaja menghapus rendermetode saya !

Saya memiliki kelas dengan componentWillReceivePropsmetode yang tidak saya butuhkan lagi, segera sebelum rendermetode singkat . Dengan tergesa-gesa menghapusnya, saya tidak sengaja menghapus seluruh rendermetode juga.

Ini adalah NYERI untuk dilacak, karena saya mendapatkan kesalahan konsol yang menunjuk pada komentar dalam file yang sama sekali tidak relevan sebagai "sumber" masalah.

Saya memiliki masalah yang sama ketika saya memanggil metode render secara salah

Memberi kesalahan:

render = () => {
    ...
}

dari pada

benar:

render(){
    ...
}

Saya memilikinya ketika saya melakukannya:

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

benar:

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

atau

const foo = ...
export default foo

Bagi saya itu terjadi karena saya tidak membungkus fungsi koneksi saya dengan benar, dan mencoba untuk mengekspor dua komponen default

Saya menghadapi kesalahan ini ketika saya mengimpor kelas yang salah dan merujuk ke toko yang salah saat menggunakan mobx di reaksi-asli.

Saya menghadapi kesalahan dalam cuplikan ini:

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

@inject ("counter")
@Observer

Setelah beberapa koreksi seperti cuplikan di bawah ini. Saya menyelesaikan masalah saya seperti ini.

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

@inject("counterStore")
@observer

Apa yang sebenarnya salah, saya menggunakan kelas yang salah alih-alih observersaya gunakan Observerdan bukannya counterStoresaya gunakan counter. Saya memecahkan masalah saya seperti ini.

Dalam file MyComponent.js

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

Saya menaruh beberapa fungsi yang terkait dengan komponen itu:

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

export myFunction() {
...
}

dan kemudian di file lain yang diimpor fungsi itu:

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

Bisakah Anda menemukan masalahnya?

Saya lupa kawat gigi keriting, dan diimpor MyComponentdengan nama myFunction!

Jadi, perbaikannya adalah:

import {myFunction} from './MyComponent'

Saya mengalami ini ketika menulis pernyataan impor yang salah saat mengimpor fungsi, bukan kelas. Jika removeMaterialada fungsi dalam modul lain:

Baik:

import { removeMaterial } from './ClaimForm';

Salah:

import removeMaterial from './ClaimForm';

Saya menerima kesalahan ini dengan membuat kesalahan kecil. Kesalahan saya adalah mengekspor kelas sebagai fungsi, bukan sebagai kelas. Di bagian bawah file kelas saya, saya punya:

export default InputField();

padahal seharusnya:

export default InputField;

Saya juga mengalami hal ini, ada kemungkinan Anda memiliki kesalahan javascript di dalam komponen reaksi Anda. Pastikan jika Anda menggunakan dependensi Anda menggunakan newoperator di kelas untuk instantiate instance baru. Kesalahan akan muncul jika

this.classInstance = Class({})

alih-alih gunakan

this.classInstance = new Class({})

Anda akan melihat di rantai kesalahan di browser

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

itu adalah hadiah yang saya percaya.

Coba hentikan HMR Anda dan tekan npm startlagi untuk membangun kembali proyek Anda.
Ini, membuat kesalahan menghilang, tidak tahu mengapa.

Dalam kasus saya, saya menulis commentdi tempat Componentkarena kesalahan

Saya baru saja menulis ini.

import React, { Component } from 'react';

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

Alih-alih ini.

import React, { Component } from 'react';

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

ini bukan masalah besar tapi bagi pemula seperti saya ini benar-benar membingungkan. Saya harap ini akan membantu.

Dalam kasus saya, menggunakan JSX komponen induk memanggil komponen lain tanpa "<>"

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

memperbaiki

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

Laporan lain di sini: Tidak berfungsi saat saya mengekspor:

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

dari pada

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

Perhatikan posisi kurung. Keduanya benar dan tidak akan ketahuan oleh seorang linter atau lebih cantik atau sesuatu yang serupa. Butuh waktu beberapa saat untuk melacaknya.

Dalam kasus saya, saya secara tidak sengaja menempatkan nama komponen ( Home) sebagai argumen pertama yang connectberfungsi saat seharusnya di bagian akhir. ya

Yang satu ini - benar-benar memberi saya kesalahan:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

Tapi yang ini bekerja dengan baik-baik saja:

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Ini terjadi ketika saya secara tidak sengaja menyebutkan renderfungsi saya secara tidak benar:

import React from 'react';

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

Contoh kesalahan saya ini hanya disebabkan karena kelas saya tidak memiliki rendermetode yang tepat .

Sebenarnya semua masalah redux terhubung. solusi:

Benar :

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

Salah & Bug :

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

Bagi saya itu salah impor reducer di rootReducer.js. Saya mengimpor kontainer alih-alih file peredam.

Contoh

import settings from './pages/Settings';

Tapi tentu harus begitu

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

Di mana direktori pengaturan berisi file-file berikut action.js, index.js, reducer.js.

Untuk memeriksanya, Anda dapat mencatat arg reduksi dari fungsi assertReducerShape () dari redux / es / redux.js.