अपरिवर्तनीय उल्लंघन: ऑब्जेक्ट एक प्रतिक्रियाशील बच्चे के रूप में मान्य नहीं हैं

Question

मेरे घटक के रेंडर फंक्शन में मेरे पास:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

सब कुछ ठीक है, लेकिन जब <li>मैं निम्नलिखित त्रुटि प्राप्त करता है तो तत्व पर क्लिक करते हुए:

बिना त्रुटि के त्रुटि: अपरिवर्तनीय उल्लंघन: वस्तुएं एक प्रतिक्रियाशील बच्चे के रूप में मान्य नहीं हैं (पाया: कुंजियों के साथ वस्तु {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, बुलबुले, रद्द करने योग्य, टाइमस्टैम्प, डिफ़ॉल्टप्रशिक्षित, isTrusted, दृश्य, विस्तार, स्क्रीनएक्स , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, बटन, बटन, संबंधितटार्गेट, पेजएक्स, पेजवाई, isDefaultPentvented, isPropagationStontin, _dispatchListeners, _dispatchIDs}। यदि आप बच्चों के संग्रह को प्रस्तुत करना चाहते हैं, तो इसके बजाय एक सरणी का उपयोग करें या रिएक्ट ऐड-ऑन से createFragment (ऑब्जेक्ट) का उपयोग करके ऑब्जेक्ट को लपेटें। की रेंडर विधि की जाँच करें Welcome।

अगर मैं मानचित्र फ़ंक्शन के अंदर करने के this.onItemClick.bind(this, item)लिए बदलूं तो (e) => onItemClick(e, item)सब कुछ उम्मीद के मुताबिक काम करता है।

अगर कोई समझा सकता है कि मैं क्या गलत कर रहा हूं और समझाऊंगा कि मुझे यह त्रुटि क्यों मिली, तो यह बहुत अच्छा होगा

अद्यतन 1:
onItemClick फ़ंक्शन निम्नानुसार है और इसे हटा देना है। त्रुटि परिणाम गायब होने का परिणाम।

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

लेकिन मैं इस लाइन को हटा नहीं सकता क्योंकि मुझे इस घटक की स्थिति को अपडेट करने की आवश्यकता है

Comments

तो कैसे this.onItemClickलागू किया जाता है?

— झटके

@zerkms उत्तर देने के लिए धन्यवाद, मैंने प्रश्न को अपडेट किया, और हां ऐसा लगता है कि समस्या इस में है ।सेटसेट (), लेकिन यह त्रुटि क्यों करता है? :(

— एल्मनीमैन

क्या setState में एक वाक्यविन्यास त्रुटि है? एक अतिरिक्त अल्पविराम? त्रुटि को ठीक नहीं किया जा सकता है, लेकिन अभी यह पाया गया है।

— भार्गव पोन्नपल्ली

@bhargavponnapalli अल्पविराम वरीयता का विषय है, मेरा अनुगामी मुझे ऐसा करने के लिए मजबूर करता है, लेकिन इसे हटाने से मदद नहीं मिलती, जवाब के लिए धन्यवाद

— अल्मनीमैन

मुझे यह त्रुटि तब हुई जब मैं एक चर के आसपास घुंघराले ब्रेसिज़ को भूल गया जो कि रिफ्लेक्टर में राज्य में जोड़ने के बाद स्थानीय चर से एक राज्य-पूर्ण वस्तु बन गया था।

— jamescampbell

Answer 1

मुझे यह त्रुटि हो रही थी और यह पता चला कि मैं अनायास ही अपने जेएसएक्स कोड में एक ऑब्जेक्ट सहित था जिसे मैंने एक स्ट्रिंग मान होने की उम्मीद की थी:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElementएक स्ट्रिंग हुआ करता था लेकिन एक रिफ्लेक्टर के कारण एक ऑब्जेक्ट बन गया था। दुर्भाग्य से, रिएक्ट के त्रुटि संदेश ने मुझे उस पंक्ति की ओर संकेत करने में अच्छा काम नहीं किया जहां समस्या मौजूद थी। जब तक मैं एक घटक में पारित किया जा रहा है "पहचाना" और तब मुझे अपमानजनक कोड मिला, मुझे अपने स्टैक ट्रेस का पालन करना पड़ा।

आपको या तो उस ऑब्जेक्ट की संपत्ति का संदर्भ देना होगा जो एक स्ट्रिंग मान है या वांछनीय के लिए ऑब्जेक्ट को स्ट्रिंग में परिवर्तित कर सकता है। एक विकल्प यह हो सकता है JSON.stringifyकि आप वास्तव में ऑब्जेक्ट की सामग्री को देखना चाहते हैं।

Comments

इसलिए, यदि आपके पास कोई वस्तु है, तो आप इसे किसी वांछित वस्तु में बदलने के बारे में क्या करेंगे?

— adinutzyc21

आपको या तो उस ऑब्जेक्ट की संपत्ति का संदर्भ देना होगा जो एक स्ट्रिंग मान है या वांछनीय के लिए ऑब्जेक्ट को स्ट्रिंग में परिवर्तित कर सकता है। यदि आप वास्तव में ऑब्जेक्ट की सामग्री को देखना चाहते हैं तो एक विकल्प JSON.stringify हो सकता है।

— कोड कमांडर

उसी त्रुटि का सामना किया और इस स्पष्टीकरण से मेरी समस्या हल हो गई। इसके लिए 1 यू.पी. :)

— पापकी

अह, मेरे पास गलत लाइन पर इंगित त्रुटि संदेश का एक ही मुद्दा था - यह कहा गया कि त्रुटि इस में थी ।सेटस्टैट ({आइटम: आइटम}) जब वास्तव में यह और नीचे गिर गया, जहां मैं उस चर का उपयोग करके प्रदर्शित करने की कोशिश कर रहा था { this.state.items}। JSON.stringify ने इसे ठीक कर दिया है!

— रबरडाकबिट

भविष्य के पाठकों के लिए: कोई स्ट्रिंग में परिवर्तित नहीं होता है। इसके बजाय ऐसा करें: const Lcomponent = this.whateverReturnsObject (); फिर रेंडर () {रिटर्न <Lcomponent />} Thats its।

— निक

Answer 2

इसलिए मुझे यह त्रुटि तब मिली जब createdAtप्रॉपर्टी को प्रदर्शित करने की कोशिश की जा रही है जो एक दिनांक ऑब्जेक्ट है। यदि आप .toString()इस तरह अंत पर सहमति व्यक्त करते हैं, तो यह रूपांतरण करेगा और त्रुटि को समाप्त करेगा। किसी अन्य समस्या में भाग जाने की स्थिति में बस इसे एक संभावित उत्तर के रूप में पोस्ट करना:

{this.props.task.createdAt.toString()}

Comments

बिंगो! मुझे यह समस्या थी, लेकिन ट्रैक से हटा दिया गया क्योंकि जो तालिका प्रदर्शित कर रही थी वह ठीक होगी (और पुनः लोड)। objects are not validजब मैंने एक पंक्ति जोड़ दी तो रिएक्ट केवल आक्रमणकारी उल्लंघन को फेंक देगा । यह बताता है कि मैं तारीख को जारी रखने से पहले स्ट्रिंग को ऑब्जेक्ट () में परिवर्तित कर रहा था, इसलिए केवल मेरी नई पंक्तियों में बनाई गई तारीख के लिए ऑब्जेक्ट थे। :( मेरे स्वच्छंद उदाहरण लोगों से सीखें!

— स्टीव

Answer 3

मुझे बस एक ही त्रुटि मिली लेकिन एक अलग गलती के कारण: मैंने डबल ब्रेसेस का उपयोग किया जैसे:

{{count}}

countसही के बजाय मूल्य डालने के लिए :

{count}

जो संकलक संभवतः में बदल गया {{count: count}}, यानी एक प्रतिक्रिया बच्चे के रूप में एक वस्तु डालने की कोशिश कर रहा है।

Comments

क्या {{}} के लिए /

— मुनीम हबीब

@ मुनीमहैब यह सिर्फ ईएस 6 सिंटेक्स है। प्रतिक्रिया के लिए एक जोड़ी की जरूरत है {}। आंतरिक जोड़ी को ES6 कोड माना जाता है। ES6 में, के {count}रूप में ही है {count: count}। इसलिए जब आप टाइप करते हैं {{count}}, तो वह बिल्कुल वैसा ही होता है { {count: count} }।

— डॉगबर्ट

यह त्रुटि थी - यह समस्या थी। कंस्ट्रक्टर में मेरे वेरिएबल को राज्य में निर्दिष्ट करने के लिए this.state = {navMenuItems: {navMenu}};... जो मूल रूप से मेरे जेएसएक्स navMenuको एक सामान्य वस्तु में बदल देता है । के लिए बदल this.state = {navMenuItems: navMenu};करने के लिए गैर-इरादतन 'डाली' से छुटकारा मिला Objectऔर समस्या का समाधान हो।

— लोक्रेलर

Answer 4

बस मैंने सोचा कि मैं इसे जोड़ दूंगा क्योंकि आज मुझे वही समस्या थी, यह पता चला कि ऐसा इसलिए था क्योंकि मैं सिर्फ समारोह में लौट रहा था, जब मैंने इसे एक <div>टैग में लपेटा तो यह काम करने लगा, नीचे

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

उपरोक्त त्रुटि का कारण बना। मैंने return()अनुभाग को बदलकर समस्या को ठीक किया :

return (
  <div>
    {gallerySection}
  </div>
);

...या केवल:

return gallerySection

Comments

या आप बस का उपयोग कर सकते हैं return gallerySectionयदि आप एक अतिरिक्त से बचना चाहते हैंdiv

— विशाल

मेरी मदद gallerySectionकरने के बजाय वापस लौटना <div>{gallerySection}</div>।

— जोनन

Answer 5

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

विचार के साथ आपका प्रतिनिधित्व करने के लिए बस एक त्वरित कोड स्निपेट (JSX) तुलना:

1. त्रुटि: ऑब्जेक्ट को बच्चे में पारित होने के साथ

   <div>
   {/* item is object with user's name and its other details on it */}
    {items.map((item, index) => {
     return <div key={index}>
   --item object invalid as react child--->>>{item}</div>;
    })}
   </div>

2. त्रुटि के बिना: बच्चे में वस्तु की संपत्ति के साथ ( जो कि आदिम होना चाहिए, यानी एक स्ट्रिंग मूल्य या पूर्णांक मूल्य )।

   <div>
    {/* item is object with user's name and its other details on it */}
     {items.map((item, index) => {
      return <div key={index}>
   --note the name property is primitive--->{item.name}</div>;
     })}
   </div>

TLDR; (नीचे दिए गए स्रोत से): सुनिश्चित करें कि जेएसएक्स में आपके द्वारा रेंडर किए गए सभी आइटम प्राइमिटिव हैं और रिएक्ट का उपयोग करते समय ऑब्जेक्ट नहीं। यह त्रुटि आमतौर पर इसलिए होती है क्योंकि किसी ईवेंट को प्रेषण में शामिल एक फ़ंक्शन को एक अप्रत्याशित ऑब्जेक्ट प्रकार दिया गया है (अर्थात जब आप एक स्ट्रिंग पास कर रहे हों तो एक वस्तु को पास करना चाहिए) या आपके घटक में JSX का हिस्सा एक आदिम (यानी this.props) का संदर्भ नहीं दे रहा है इस बनाम। props.name)।

सोर्स - codingbismuth.com

Comments

यह लिंक अब काम नहीं करता है, हालांकि मुझे आपके उपयोग के मामले में आपके उत्तर की संरचना सबसे अधिक जानकारीपूर्ण लगती है। यह त्रुटि दोनों वेब में उत्पादक है और देशी वातावरण पर प्रतिक्रिया करती है, और अक्सर async जीवनचक्र का उपयोग करते हुए एक घटक के भीतर पैंप () ऑब्जेक्ट की एक सरणी के दौरान एक जीवनचक्र त्रुटि के रूप में होता है। देशी प्रतिक्रिया-मूल-

— स्क्रॉलव्यू

खुशी है, कि आप इसे लिंक लिंक जारी करने के लिए उपयोगी और धन्यवाद पाते हैं।

— झवेरी

इससे मुझे मदद मिली। किसी वस्तु के बजाय एक संपत्ति लौटाएं:return <p>{item.whatever}</p>;

— क्रिस

Answer 6

खान को अनावश्यक रूप से घुंघराले ब्रेसिज़ के साथ एक वेरिएबल के चारों ओर HTML एलिमेंट के साथ रेंडर (रिटर्न) फंक्शन के रिटर्न स्टेटमेंट के साथ करना था। इसने रिएक्ट को एक तत्व के बजाय एक वस्तु के रूप में माना।

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

एक बार जब मैंने तत्व से घुंघराले ब्रेसिज़ को हटा दिया, तो त्रुटि हो गई थी, और तत्व को सही तरीके से प्रदान किया गया था।

Comments

धन्यवाद! मेरे लिए भी काम करता है तत्व से घुंघराले ब्रेसिज़ निकालें!

— हुआ झांग

Answer 7

प्रेजेंटेशन कंपोनेंट में भेजे जाने वाले प्रॉप्स के आसपास घुंघराले ब्रेसिज़ को भूलकर मेरा क्या करना था:

इससे पहले:

const TypeAheadInput = (name, options, onChange, value, error) => {

उपरांत

const TypeAheadInput = ({name, options, onChange, value, error}) => {

Comments

मेरी समस्या आपके लिए सबसे समान थी, इसलिए आपके समाधान को लागू करने से मुझे मदद मिली। +1 और धन्यवाद!

— m1gp0z

Answer 8

मुझे भी यह "ऑब्जेक्ट एक रिएक्ट चाइल्ड के रूप में मान्य नहीं है" त्रुटि हो रही थी और मेरे लिए इसका कारण मेरे जेएसएक्स में एक अतुल्यकालिक फ़ंक्शन को कॉल करने के कारण था। निचे देखो।

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

मैंने जो सीखा वह यह है कि एसिंक्रोनस रेंडरिंग रिएक्ट में समर्थित नहीं है। रिएक्ट टीम यहां समाधान के रूप में काम कर रही है ।

Comments

इसके बजाय आपको क्या करना चाहिए क्योंकि डेटा में स्थिति के अनुसार राज्य को अपडेट करना है, और फिर राज्य मूल्यों का उपयोग करते हुए घटकों को प्रस्तुत करना है

— mrwagaba

इसके बजाय आपको क्या करना चाहिए क्योंकि डेटा में स्थिति के अनुसार राज्य को अपडेट करना है, और फिर राज्य मूल्यों का उपयोग करते हुए घटकों को प्रस्तुत करना है

— mrwagaba

Answer 9

एंड्रॉइड के साथ फायरबेस का उपयोग करने वाले किसी के लिए, यह केवल एंड्रॉइड को तोड़ता है। मेरा आईओएस एमुलेशन इसे अनदेखा करता है।

और जैसा कि ऊपर अपूर्व बैंके ने पोस्ट किया है।

Android के लिए Firebase V5.0.3 के ऊपर कुछ भी, एटीएम एक बस्ट है। ठीक कर:

npm i --save firebase@5.0.3

कई बार यहां पुष्टि की गई https://github.com/firebase/firebase-js-sdk/issues/871

Comments

नीचे दिए गए KNDheeraj द्वारा प्रस्तावित समाधान का प्रयास करने वाले किसी के लिए, **** 1 डाउन वोट अगर आपके प्रोजेक्ट के भीतर किसी भी फाइल का उपयोग फायरबेस द्वारा किया जाता है। तो बस अंत में उस आयात firebase बयान जगह है !! मुझे पता है यह पागल लग रहा है, लेकिन यह कोशिश करो !! **************** मैंने इसे आज़माया और यह केवल आईओएस के लिए नहीं बल्कि विंडोज़ पर एंड्रॉइड के लिए एक समाधान है।

— RedEarth

Answer 10

मुझे भी यही समस्या है लेकिन मेरी गलती इतनी ही मूर्खतापूर्ण है। मैं सीधे वस्तु तक पहुँचने की कोशिश कर रहा था।

class App extends Component {
    state = {
        name:'xyz',
        age:10
    }
    render() {
        return (
            <div className="App">
                // this is what I am using which gives the error
                <p>I am inside the {state}.</p> 

                //Correct Way is

                <p>I am inside the {this.state.name}.</p> 
            </div>
        );
    }                                                                             

}

Answer 11

यदि किसी कारण से आपने फायरबेस आयात किया। फिर दौड़ने की कोशिश करें npm i --save firebase@5.0.3। ऐसा इसलिए है क्योंकि फायरबेस प्रतिक्रिया-मूल को तोड़ता है, इसलिए इसे चलाने से यह ठीक हो जाएगा।

Answer 12

मेरे मामले में यह था कि मैं एक html एलिमेंट को रेंडर करने के लिए फंक्शन रेंडर करना भूल गया था और मैं एक ऑब्जेक्ट लौटा रहा था। मैंने क्या किया था कि मैं एक HTML तत्व के साथ {आइटम्स} को लपेट रहा था - नीचे एक साधारण div

<ul>{items}</ul>

Answer 13

मुझे वही समस्या थी क्योंकि मैंने propsघुंघराले ब्रेसिज़ में नहीं डाला था ।

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

इसलिए यदि आपका कोड उपरोक्त के समान है तो आपको यह त्रुटि मिलेगी। इसे हल करने के लिए बस चारों ओर घुंघराले ब्रेसिज़ रखो props।

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

Comments

@ धरमन मुझे लगता है कि इस छोटे से

— आक्रोश

मैंने नहीं कहा कि यह नहीं था। मुझे लगता है कि आपका उत्तर इंडेंटेशन के साथ बेहतर लगता है। यदि आप असहमत हैं तो कृपया इसे वापस लेने के लिए स्वतंत्र महसूस करें।

— धर्म

Answer 14

मुझे वही त्रुटि मिली, मैंने इसे बदल दिया

export default withAlert(Alerts)

इसके लिए

export default withAlert()(Alerts)।

पुराने संस्करणों में पूर्व कोड ठीक था, लेकिन बाद के संस्करणों में यह एक त्रुटि फेंकता है। इसलिए इर्रिट से बचने के लिए बाद के कोड का उपयोग करें।

Answer 15

मेरे मामले में त्रुटि हो रही थी क्योंकि मैंने घुंघराले ब्रेस में तत्वों की सरणी लौटा दी केवल सरणी वापस करने के बजाय लौटा दी थी।

त्रुटि के साथ कोड

   render() {
        var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
        );
        return {rows};
    }

सही कोड

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
    );
    return rows;
}

Answer 16

आप पूरे ऑब्जेक्ट के बजाय ऑब्जेक्ट की कुंजियों का उपयोग कर रहे थे!

अधिक विवरण यहां देखे जा सकते हैं: https://github.com/gildata/RAIO/issues/48

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SCT extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: this.props.data,
            new_data: {}
        };
    }
    componentDidMount() {
        let new_data = this.state.data;
        console.log(`new_data`, new_data);
        this.setState(
            {
                new_data: Object.assign({}, new_data)
            }
        )
    }
    render() {
        return (
            <div>
                this.state.data = {JSON.stringify(this.state.data)}
                <hr/>
                <div style={{color: 'red'}}>
                    {this.state.new_data.name}<br />
                    {this.state.new_data.description}<br />
                    {this.state.new_data.dependtables}<br />
                </div>
            </div>
        );
    }
}

SCT.propTypes = {
    test: PropTypes.string,
    data: PropTypes.object.isRequired
};

export {SCT};
export default SCT;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 17

मेरे पास एक ही मुद्दा है, मेरे मामले में, मैं redux को अपडेट करता हूं राज्य को , और नए डेटा पैरामीटर पुराने मापदंडों से मेल नहीं खाते हैं, इसलिए जब मैं इस त्रुटि के माध्यम से कुछ मापदंडों का उपयोग करना चाहता हूं,

शायद यह अनुभव किसी की मदद करे

Comments

मेरे मामले में, (Django) ListSerializer और CreateSerializer एक ही फ़ील्ड लौटाते हैं और उनमें से कुछ (यह आपके प्रोजेक्ट पर निर्भर है) केवल पढ़ने के लिए फ़ील्ड हैं, इसलिए एक बार और जब भी नया डेटा बनाएं बस

— Redux

Answer 18

यदि आप फायरबेस का उपयोग कर रहे हैं और इस त्रुटि को देखते हुए, यह जांचने के लायक है कि क्या आप इसे सही आयात कर रहे हैं। संस्करण 5.0.4 के अनुसार आपको इसे इस तरह से आयात करना होगा:

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

हाँ मैं जानता हूँ। मैं इस पर भी 45 मिनट खो दिया।

Comments

धन्यवाद। इसने मेरी समस्या को firebase (5.9.2) :)

— Mate

Answer 19

आमतौर पर यह पॉप अप होता है क्योंकि आप ठीक से विनाश नहीं करते हैं। इस कोड को उदाहरण के लिए लें:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

हम इसे = text =>परम के साथ घोषित कर रहे हैं । लेकिन वास्तव में, रिएक्ट एक सर्वव्यापी propsवस्तु होने की उम्मीद कर रहा है ।

इसलिए हमें वास्तव में ऐसा कुछ करना चाहिए:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

अंतर नोटिस? यहां propsपरम को कुछ भी नाम दिया जा सकता है ( propsयह केवल उस सम्मेलन का है जो नामकरण से मेल खाता है), रिएक्ट सिर्फ चाबियाँ और वैल के साथ एक वस्तु की उम्मीद कर रहा है।

ऑब्जेक्ट को नष्ट करने के साथ आप कर सकते हैं, और अक्सर देखेंगे, कुछ इस तरह से:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

... जो काम करता है।

संभावना है, इस पर ठोकर खाने वाले किसी व्यक्ति ने गलती से अपने घटक के प्रॉप्स को बिना विनाश के घोषित कर दिया।

Answer 20

मैंने सिर्फ अपने आप को इस त्रुटि के एक मूर्खतापूर्ण संस्करण के माध्यम से रखा है, जिसे मैं यहां पोस्टीरिटी के लिए भी साझा कर सकता हूं।

मैं इस तरह से कुछ JSX था:

...
{
  ...
  <Foo />
  ...
}
...

मुझे कुछ डिबग करने के लिए यह टिप्पणी करने की आवश्यकता थी। मैंने अपनी IDE में कीबोर्ड शॉर्टकट का उपयोग किया, जिसके परिणामस्वरूप:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

जो, ज़ाहिर है, अमान्य है - ऑब्जेक्ट बच्चों की प्रतिक्रिया के रूप में मान्य नहीं हैं!

Answer 21

मैं इस सूची में एक और समाधान जोड़ना चाहूंगा।

चश्मा:

• "प्रतिक्रिया": "^ 16.2.0",
• "प्रतिक्रिया-डोम": "^ 16.2.0",
• "प्रतिक्रिया-रिडक्स": "^ 5.0.6",
• "प्रतिक्रिया-स्क्रिप्ट": "^ 1.0.17",
• "रिडक्स": "^ 3.7.2"

मुझे एक ही त्रुटि का सामना करना पड़ा:

अनकवर्ड एरर: ऑब्जेक्ट्स एक रिएक्ट बच्चे के रूप में मान्य नहीं हैं (पाया: कुंजियों के साथ वस्तु {XXXXX})। यदि आप बच्चों के संग्रह को प्रस्तुत करना चाहते हैं, तो इसके बजाय एक सरणी का उपयोग करें।

यह मेरा कोड था:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

समाधान:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

समस्या इसलिए हो रही थी क्योंकि पेलोड वस्तु के रूप में वस्तु भेज रहा था। जब मैंने पेलोड वैरिएबल को हटा दिया और उपयोगकर्ताइन्पुट मूल्य को प्रेषण में डाल दिया तो सब कुछ उम्मीद के मुताबिक काम करना शुरू कर दिया।

Answer 22

अगर आपके प्रोजेक्ट के भीतर आपके किसी फाइल के फायरबेस का उपयोग करने की स्थिति में। तो बस अंत में उस आयात firebase बयान जगह है !!

मुझे पता है यह पागल लग रहा है, लेकिन यह कोशिश करो !!

Answer 23

जब मैंने निम्नलिखित त्रुटि का सामना किया तो मेरा मुद्दा आसान था:

objects are not valid as a react child (found object with keys {...}

बस यह था कि मैं ऑब्जेक्ट में निर्दिष्ट कीज़ के साथ एक ऑब्जेक्ट पास कर रहा था जबकि ऑब्जेक्ट को सीधे एक ऑब्जेक्ट में रेंडर करने की कोशिश कर रहा था {ऑब्जेक्ट} इसे स्ट्रिंग होने की उम्मीद

object: {
    key1: "key1",
    key2: "key2"
}

एक रिएक्टर घटक पर रेंडर करते हुए, मैंने नीचे कुछ पसंद किया

render() {
    return this.props.object;
}

लेकिन यह होना चाहिए था

render() {
    return this.props.object.key1;
}

Answer 24

यदि स्टेटलेस घटकों का उपयोग किया जाता है, तो इस तरह के प्रारूप का पालन करें:

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

यह मेरे लिए काम करने लगा

Answer 25

मेरे साथ भी कुछ ऐसा ही हुआ है ...

मैंने लिखा:

{response.isDisplayOptions &&
{element}
}

एक div के अंदर रखने से यह तय हो गया:

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

Answer 26

मिली: कुंजियों वाली वस्तु

जिसका मतलब है कि आप कुछ कर रहे हैं एक महत्वपूर्ण मूल्य है। तो आपको अपने हैंडलर को संशोधित करने की आवश्यकता है:

से

onItemClick(e, item) {
   this.setState({
     lang: item,
   });
}

सेवा

onItemClick({e, item}) {
  this.setState({
    lang: item,
  });
}

आप ब्रेसिज़ ( {}) से चूक गए ।

Comments

विश्वास नहीं कर सकता यह समस्या थी

— कुशाल। this

मुझे भी आश्चर्य है। अभी भी यह पता नहीं चला है कि यह किस कारण से है

— अरुल मणि

Answer 27

मेरे मामले में, मैंने अपने चाइल्ड फंक्शन कंपोनेंट में एक एसिंक्स जोड़ा और इस त्रुटि का सामना किया। चाइल्ड कंपोनेंट के साथ एसिंक्स का उपयोग न करें।

Answer 28

फायरबेस का उपयोग करने के मामले में, यदि यह importबयानों के अंत में काम नहीं करता है, तो आप इसे जीवन-चक्र विधि में से एक के अंदर डालने का प्रयास कर सकते हैं, अर्थात आप इसे अंदर रख सकते हैं componentWillMount()।

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}

Answer 29

Invariant Violation: Objects are not valid as a React childमेरे लिए एक घटक का उपयोग करते समय एक renderItemप्रॉप्स की आवश्यकता होती है , जैसे:

renderItem={this.renderItem}

और मेरी गलती मेरी renderItemविधि बनाने की थी async।

Answer 30

इसे लिखने के कारण मेरी त्रुटि थी:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

के बजाय:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

इसका मतलब था कि मैं इसके भीतर मूल्य के बजाय ऑब्जेक्ट रेंडर करने की कोशिश कर रहा था।

संपादित करें: यह प्रतिक्रिया के लिए है देशी नहीं है।