मेरी प्रतिक्रिया परियोजना में "एक वर्ग को एक समारोह के रूप में नहीं बुलाया जा सकता है"

Question

मैं अपनी परियोजना में एक प्रतिक्रिया मानचित्र घटक जोड़ने की कोशिश कर रहा हूं, लेकिन एक त्रुटि में चल रहा है। मैं एक संदर्भ के रूप में फुलस्टैक रिएक्ट के ब्लॉग पोस्ट का उपयोग कर रहा हूं । मैंने नीचे ट्रैक किया जहां त्रुटि google_map.js लाइन 83 में फेंक दी जाती है:

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

यहाँ मेरा नक्शा घटक अब तक है। जब पृष्ठ ५ ,-६०, अंतिम तीन पंक्तियों की टिप्पणी करता है तो पृष्ठ ठीक (बिना मानचित्र के) लोड होता है। संपादित करें: मैंने परिवर्तन किए जो @Dmitriy नेवज़ोरोव ने सुझाए और यह अभी भी मुझे वही त्रुटि देता है।

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

Comments

आपके पास दो export defaultएस हैं, और क्या यह new GoogleAPIComponent()नहीं होगा GoogleAPIComponent()?

— 13 अक्टूबर को gcampbell

मैंने एक चूक को दूर किया और आपके सुझाव की कोशिश की। ऐसा लगता है कि यह वास्तव में अब Google मैप्स से बात कर रहा है, जो अच्छा है, लेकिन इससे पहले कि पेज लोड हो सके वह एक और क्रिप्टोकरेंसी को फेंकता है: Locations.js: 58 अनकैप्ड टाइपर्र: (मध्यवर्ती मान) एक फ़ंक्शन नहीं है "। कोई विचार?

— माइक फ्लेमिंग

यदि आप हटा दें तो क्या होगा (LocationContainer)?

— 17 अक्टूबर को gcampbell

धन्यवाद, मुझे लगता है कि यह मिल गया! अजीब, यही है कि उन्होंने इसे अपने ब्लॉग पोस्ट पर कैसे लिखा है। अभी भी Google मानचित्र से कुछ अन्य त्रुटियां हो रही हैं, मैं उन्हें यहाँ रखूँगा: 'GoogleMap: apiKey को पदावनत कर दिया गया है, इसके बजाय bootstrapURLKeys = {{key: your_API_KEY}} का उपयोग करें। google_map.js: 689 GoogleMap: केंद्र या defaultCenterproperty परिभाषित किया जाना चाहिए google_map.js: 699 GoogleMap: ज़ूम या defaultZoomproperty परिभाषित किया जाना चाहिए google_map.js: 704 '

— माइक फ्लेमिंग

मैं अन्य त्रुटियों के बारे में निश्चित नहीं हूं, लेकिन आप पहले एक को ठीक करने के लिए यह कोशिश कर सकते हैं:export default new GoogleApiComponent({ bootstrapURLKeys: MY_API_KEY })

— gcampbell

Answer 1

मेरे लिए यह तब हुआ जब मैं extends React.Componentअंत में लिखना भूल गया । मुझे पता है कि यह वास्तव में आपके पास नहीं है, लेकिन इस उत्तर को पढ़ने वाले अन्य लोग इससे लाभान्वित हो सकते हैं, उम्मीद है।

Comments

वहाँ महान पोस्ट पर प्रतिक्रिया बताते हैं कि क्यों यह काम करता है overreacted.io/how-does-react-tell-a-class-from-a-function

— एरिक Kigathi

पोस्ट का सारांश: ब्राउज़र में एक वर्ग और एक फ़ंक्शन के बीच भेद करना वास्तव में पूरी तरह से तुच्छ नहीं है ... "वास्तविक समाधान वास्तव में सरल है, लेकिन [मैं] यह बताने के लिए एक विशाल स्पर्शरेखा पर जा रहा हूं कि इस समाधान के साथ प्रतिक्रिया क्यों समाप्त हुई। .. "blah, blah, blah, ... ->" यदि आप React.Component का विस्तार नहीं करते हैं, तो प्रतिक्रिया प्रोटोटाइप पर isReactComponent नहीं पाएगी, और घटक को कक्षा के रूप में नहीं मानेगी। "

— स्पिंकस

महान। मैं इसी तरह के मुद्दे का सामना कर रहा था और आपके समाधान ने इस मुद्दे को ठीक कर दिया। लेकिन मेरा वाक्य-विन्यास था import React, { Component } from 'react'; class extends Component। मैं समझ नहीं पा रहा था कि इसने इस समस्या को कैसे हल Componentकिया React.Component। क्या आयात मायने रखता है?

— अरुण रामचंद्रन

Answer 2

मेरे लिए यह इसलिए था क्योंकि मैं newएनिमेटेड स्टेट की स्थापना करते समय कीवर्ड का उपयोग करना भूल गया था ।

उदाहरण के लिए:

fadeAnim: Animated.Value(0),

सेवा

fadeAnim: new Animated.Value(0),

इसे ठीक कर देंगे।

Comments

इससे मेरी समस्या हल हो गई, मैं एनिमेटेड नहीं बल्कि एक अलग उपयोग के मामले का उपयोग कर रहा था लेकिन नए कीवर्ड का उपयोग करने के बाद इसे हल किया। धन्यवाद

— ओलिवर जेएम

४ घंटे ४४ मिनट और ४ सेकंड व्यर्थ जानने की कोशिश में बिताया। आप भगवान हैं।

— सत्येश्वरन

हाँ, यह मैं भी था। धन्यवाद!

— जेम्स कुशिंग

Answer 3

tl; डॉ

यदि आप React Router v4 का उपयोग करते <Route/>हैं तो अपने घटक की जांच करें यदि आप वास्तव में componentअपने वर्ग आधारित रिएक्ट घटक को पारित करने के लिए प्रोप का उपयोग करते हैं!

आम तौर पर: यदि आपकी कक्षा ठीक लगती है, तो यह जाँचें कि क्या यह कोड उसे फ़ंक्शन के रूप में उपयोग करने की कोशिश नहीं करता है।

व्याख्या

मुझे यह त्रुटि मिली क्योंकि मैं रिएक्ट राउटर v4 का उपयोग कर रहा था और मैंने गलती से अपने घटक को पास करने के लिए घटक के renderबजाय प्रोप का उपयोग किया जो कि एक वर्ग था। यह एक समस्या थी, क्योंकि एक फ़ंक्शन की उम्मीद है (कॉल), जबकि एक है जो रिएक्ट घटकों पर काम करेगा।component<Route/>rendercomponent

तो इस कोड में:

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

<Route/>घटक वाली रेखा को इस तरह लिखा जाना चाहिए था:

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

यह शर्म की बात है, कि वे इसकी जांच नहीं करते हैं और इस तरह की आसान और गलती को पकड़ने के लिए एक प्रयोग करने योग्य त्रुटि देते हैं।

Answer 4

मुझे इस्तेमाल किया क्योंकि मैं इस्तेमाल किया

PropTypes.arrayOf(SomeClass)

के बजाय

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Comments

धन्यवाद, गलत PropTypes परिभाषा मेरे मामले में मुद्दा थी।

— वासिली

इससे मेरी समस्या हल हो गई! था PropTypes.oneOfType([SomeClass, SomeOtherClass]).isRequired,बजाय PropTypes.oneOfType([PropTypes.instanceOf(SomeClass), PropTypes.instanceOf(SomeOtherClass)]).isRequired,

— डौग

धन्यवाद, वास्तव में लंबे समय से सोच रहा था कि वहां क्या गलत हो रहा है!

— फीवर मीडिया

Answer 5

आपने export defaultघोषणा को दोहराया है । पहले वाले को दूसरे के द्वारा ओवरराइड किया जाता है जो वास्तव में एक फ़ंक्शन है।

Comments

अच्छी पकड़! मैंने GoogleApiComponent के सामने डिफ़ॉल्ट को छोड़ दिया और मुझे अभी भी वही त्रुटि मिली है। वैकल्पिक रूप से, सभी चूक को हटाने से GoogleApiComponent पर मेरे टर्मिनल में मुझे "अप्रत्याशित टोकन" त्रुटि मिलती है।

— माइक फ्लेमिंग

Answer 6

मेरे लिए, इसके ComponentName.prototypeबजाय यह था ComponentName.propTypes। PhpstormIDE द्वारा सुझाए गए ऑटो । आशा है कि यह किसी की मदद करेगा।

Answer 7

मैंने एक ही मुद्दे का अनुभव किया, यह इसलिए हुआ क्योंकि मेरा ES6घटक वर्ग विस्तार नहीं कर रहा था React.Component।

Answer 8

अधिकतर ये समस्याएँ तब होती हैं जब आप प्रतिक्रिया से घटक को छोड़ देते हैं:

import React, {Component} from 'react'

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

Answer 9

मेरे लिए यह इसलिए था क्योंकि मैंने प्रोपटीज़ के बजाय प्रोटोटाइप का उपयोग किया था

class MyComponent extends Component {

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

MyComponent.prototype = {

};

यह होना चाहिए

MyComponent.propTypes = {

};

Comments

मेरे लिए एक ही मामला है। धन्यवाद!

— टेक्सन

Answer 10

Post.proptypes = {

}

सेवा

Post.propTypes = {

}

किसी को इस तरह की त्रुटि को बहुत सटीक तरीके से मॉनिटर करने के बारे में टिप्पणी करनी चाहिए।

Comments

कुछ विस्तृत जानकारी के साथ अपने समाधान / उत्तर की व्याख्या करना बेहतर है।

— धर्मंग

याह होता है, ब्रावो!

— मबंडा

Answer 11

ऐसा लगता है कि इस त्रुटि के प्रकट होने पर कोई एकल मामला नहीं है।

जब मुझे राज्य-निर्माता घटक में कंस्ट्रक्टर घोषित नहीं किया, तो मुझे खुशी हुई।

class MyComponent extends Component {

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

के बजाय

class MyComponent extends Component {

    constructor(props) {
        super(props);
    }

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

Answer 12

दो चीजें आप देख सकते हैं,

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

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

• सुनिश्चित करें कि आप React.Component का विस्तार करते हैं
• प्रोटोटाइप के बजाय प्रोपटीप्स का उपयोग करें (IDE intellisense के अनुसार)

Comments

Slider.propTypes होना चाहिए: {}

— डेविड

Answer 13

यह एक सामान्य समस्या है, और किसी एक मामले में प्रकट नहीं होती है। लेकिन, सभी मामलों में आम समस्या यह है कि आप importएक विशिष्ट घटक को भूल जाते हैं (इससे कोई फर्क नहीं पड़ता कि यह या तो आपके द्वारा स्थापित पुस्तकालय या आपके द्वारा बनाए गए कस्टम मेड घटक से है):

import {SomeClass} from 'some-library'

जब आप इसे बाद में उपयोग करते हैं, तो इसे आयात किए बिना, कंपाइलर सोचता है कि यह एक फ़ंक्शन है। इसलिए, यह टूट जाता है। यह एक सामान्य उदाहरण है:

imports

...code...

और फिर अपने कोड के अंदर कहीं

<Image {..some props} />

यदि आप घटक आयात करना भूल गए हैं <Image />तो संकलक शिकायत नहीं करेगा जैसे यह अन्य आयातों के लिए करता है, लेकिन जब यह आपके कोड तक पहुंच जाएगा तो टूट जाएगा।

Answer 14

मेरे लिए, यह इसलिए था क्योंकि मैंने गलती से अपना renderतरीका हटा दिया था !

मेरे पास एक ऐसा componentWillReceivePropsतरीका था जिसमें मुझे एक विधि की आवश्यकता नहीं थी, तुरंत एक छोटी renderविधि से पहले । इसे हटाने की जल्दबाजी में, मैंने गलती से पूरी renderविधि को भी हटा दिया ।

यह नीचे ट्रैक करने के लिए एक PAIN था , क्योंकि मुझे समस्या के "स्रोत" होने के रूप में पूरी तरह से अप्रासंगिक फाइलों में टिप्पणियों पर इंगित करने में कंसोल त्रुटियां मिल रही थीं।

Answer 15

मुझे एक समान समस्या थी मैं गलत तरीके से रेंडर विधि को बुला रहा था

एक त्रुटि दी:

render = () => {
    ...
}

के बजाय

सही बात:

render(){
    ...
}

Answer 16

मेरे पास ऐसा था जब मैंने ऐसा किया था:

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

सही ढंग से:

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

या

const foo = ...
export default foo

Answer 17

मेरे लिए यह इसलिए हुआ क्योंकि मैंने अपने कनेक्ट फ़ंक्शन को ठीक से लपेट नहीं किया था, और डिफ़ॉल्ट दो घटकों को निर्यात करने की कोशिश की

Answer 18

मुझे इस त्रुटि का सामना करना पड़ा जब मैंने गलत वर्ग का आयात किया और प्रतिक्रिया-मूल में mobx का उपयोग करते हुए गलत स्टोर का संदर्भ दिया।

मुझे इस स्निपेट में त्रुटि का सामना करना पड़ा:

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

@inject ("counter")
@Observer

कुछ सुधारों के बाद जैसे कि नीचे स्निपेट। मैंने अपने मुद्दे को इस तरह से हल किया।

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

@inject("counterStore")
@observer

वास्तव में क्या गलत था, मैं गलत क्लास का उपयोग कर रहा था बजाय observerमैं इस्तेमाल किया Observerऔर इसके बजाय counterStoreमैंने इस्तेमाल किया counter। मैंने अपने मुद्दे को इस तरह से हल किया।

Answer 19

फाइल में 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'

Answer 20

मुझे यह अनुभव हुआ जब एक क्लास के बजाय एक फंक्शन को इंपोर्ट करते समय इम्पोर्टेन्ट स्टेटमेंट को गलत लिखा जाता है। यदि removeMaterialएक अन्य मॉड्यूल में एक फ़ंक्शन है:

सही:

import { removeMaterial } from './ClaimForm';

गलत:

import removeMaterial from './ClaimForm';

Answer 21

मुझे यह गलती छोटी सी गलती से हुई। मेरी त्रुटि वर्ग के बजाय एक फ़ंक्शन के रूप में कक्षा का निर्यात कर रही थी। मेरे पास मेरी कक्षा फ़ाइल के नीचे:

export default InputField();

जब यह होना चाहिए था:

export default InputField;

Answer 22

मैंने इसमें भी भाग लिया है, यह संभव है कि आपके प्रतिक्रिया घटक के अंदर एक जावास्क्रिप्ट त्रुटि हो। सुनिश्चित करें कि यदि आप एक निर्भरता का उपयोग कर रहे हैं तो आप newनए उदाहरण को इंस्टेंट करने के लिए कक्षा पर ऑपरेटर का उपयोग कर रहे हैं । अगर फेंक देंगे तो त्रुटि

this.classInstance = Class({})

इसके बजाय उपयोग करें

this.classInstance = new Class({})

आपको ब्राउज़र में त्रुटि श्रृंखला दिखाई देगी

at ReactCompositeComponentWrapper._constructComponentWithoutOwner

मेरा मानना ​​है कि सस्ता है।

Answer 23

आप HMR को रोकने का प्रयास करें और npm startफिर से आपको प्रोजेक्ट के पुनर्निर्माण के लिए हिट करें।
इससे, गायब होने में त्रुटि हुई, पता नहीं क्यों।

Answer 24

मेरे मामले में मैंने गलती commentसे लिखाComponent

मैंने अभी यह लिखा है।

import React, { Component } from 'react';

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

इसके अलावा।

import React, { Component } from 'react';

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

यह कोई बड़ी बात नहीं है, लेकिन मेरे जैसे शुरुआती के लिए यह वास्तव में भ्रामक है। मुझे उम्मीद है कि यह सहायक होगा।

Answer 25

मेरे मामले में, जेएसएक्स का उपयोग कर एक मूल घटक "<>" के बिना अन्य घटकों को बुला रहा था।

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

ठीक कर

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

Answer 26

यहाँ एक और रिपोर्ट: यह काम नहीं किया जैसा कि मैंने निर्यात किया:

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

के बजाय

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

कोष्ठक की स्थिति पर ध्यान दें। दोनों ही सही हैं और लिंटर या प्रेटियर या इसी तरह की किसी चीज से नहीं पकड़े जाएंगे। इसे ट्रैक करने के लिए मुझे कुछ समय लगा।

Answer 27

मेरे मामले में, मैंने गलती से घटक नाम ( Home) को पहले तर्क के रूप में रखा, connectजबकि यह अंत में होना चाहिए था। ओह।

इस एक ने मुझे त्रुटि दी:

export default connect(Home)(mapStateToProps, mapDispatchToProps)

लेकिन यह एक काम किया-ठीक है:

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Answer 28

यह तब हुआ जब मैंने गलती से अपने renderकार्य का नाम गलत दिया:

import React from 'react';

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

इस त्रुटि का मेरा उदाहरण केवल इसलिए था क्योंकि मेरी कक्षा में एक उचित renderविधि नहीं थी ।

Answer 29

वास्तव में सभी समस्या redux कनेक्ट करती हैं। समाधान:

सही करें :

export default connect(mapStateToProps, mapDispatchToProps)(PageName)

गलत और बग :

export default connect(PageName)(mapStateToProps, mapDispatchToProps)

Answer 30

मेरे लिए यह rootReducer.js में एक reducer का गलत आयात था। मैं reducer फ़ाइल के बजाय कंटेनर आयात किया।

उदाहरण

import settings from './pages/Settings';

लेकिन यकीन है कि यह होना चाहिए

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

जहाँ सेटिंग्स डायरेक्टरी में फाइल्स एक्शन। जेएस, इंडेक्स.जेएस, रेड्यूसर.जेएस शामिल हैं।

इसे जांचने के लिए आप asuxReducerShape () फ़ंक्शन के reducers arg को redux / es / redux.js से लॉग इन कर सकते हैं।