2015-11-30 17 views
21

मैंने एक नई प्रतिक्रिया परियोजना स्थापित की है और किसी कारण से, componentDidMount विधि नहीं कहा जा रहा है।प्रतिक्रिया घटक DidMount फायरिंग

मैंने console.log पर पर कॉल करके इस व्यवहार को सत्यापित किया है लेकिन मैं कंसोल में इसका आउटपुट नहीं देख सकता।

इसके अलावा, this.setState() काम नहीं कर रहा है।

मैं काफी हद तक स्टंप हूं कि componentDidMount क्यों नहीं कहा जा रहा है। मैंने दोनों प्रतिक्रिया "v0.14.0" और "v0.14.3" का उपयोग करने का प्रयास किया।

'घटकडिडमाउंट' क्यों नहीं कहा जा रहा है?

कोड:

var React = require('react'); 

var RecipePage = React.createClass({ 
    componentDidMount: function() { 
    console.log('mounted!'); 
    }, 
    render: function() { 
    return (
     <div>Random Page</div> 
    ); 
    } 
}); 

module.exports = RecipePage; 
+1

क्या आप वास्तव में किसी भी तरह से 'पकाने की विधि' का उपयोग करते हैं? आप कुछ और निर्यात कर रहे हैं। – zerkms

+0

हाय @zerkms। मेरे कोड को संपादित किया ताकि संदर्भित निर्यात नाम "पकाने की विधि" से मेल खाता हो। डर्न ... अभी भी एक ही त्रुटि हो रही है ... – user3295436

+1

क्या त्रुटि? ..... – zerkms

उत्तर

14

तो ... लो और निहारना .... मैं अंत में यह काम कर रहा मिला (एक बैक एंड विशेषज्ञ की मदद से)। "घटकडिडमाउंट" विधियां फायरिंग नहीं कर रही थीं क्योंकि मेरा सर्वर सर्वर की ओर पर सभी प्रतिक्रिया + एचटीएमएल सामग्री को बंडल और सेवा दे रहा था। (केवल "प्रस्तुत करना" और "getInitialState" तरीकों कि ग्राहक के ब्राउज़र के माध्यम से दिया जाता है "html" खाका बनाने के लिए कहा जाता हो ... लेकिन यह वहाँ बंद हो जाता है, क्योंकि यह सोचता है कि वह पूरा नहीं)

ठीक: एक का पता लगाएं परिणामस्वरूप "संकलित" एचटीएमएल सर्वर के माध्यम से वितरित करने के लिए और इसके अलावा, प्रतिक्रिया की अपनी घटनाओं को सुलभ और क्लाइंट पक्ष पर फिर से "आग लगने योग्य" की अनुमति देता है। मेरी "व्यू" फ़ाइल (index.js या index.html) को संकलित करते समय, मैंने एक "Application.start()" स्क्रिप्ट शामिल की जो टेम्पलेट में मेरे bundle.js कोड को इंजेक्ट करता है। फिर मेरे gulpfile में, "एप्लिकेशन" चर निर्यात किया ताकि "दृश्य" फ़ाइल इसे एक्सेस कर सके।

गह ... इस के लिए मेरे बालों को खींच लिया। सर्वर साइड बनाम क्लाइंट साइड प्रतिपादन

+1

में लाया जाता है, मुझे वास्तव में एक ही सटीक समस्या है। मैं घटक और बच्चे घटक में घटकडिडमाउंट() को कॉल कर रहा हूं। यह बच्चे में आग लगती है, लेकिन मूल घटक नहीं। मैं समझ नहीं पा रहा हूं कि आपने इसे ठीक करने के लिए क्या किया है। – vtj205

+0

@ vtj205 दिलचस्प समस्या। आपकी समस्या मेरे सभी घटकों (बच्चे + अभिभावक) में से थोड़ी अलग है, इसलिए "घटकडिडमाउंट" आग नहीं आई है।अपने मामले में, जांच करें कि क्या कोई टाइपो है या नहीं। यदि "घटकडिडमाउंट" एक बच्चे घटक के लिए आग लगने में सक्षम है, तो यह आपके मूल घटक के साथ आग लगने में सक्षम होना चाहिए। – user3295436

2

आप RecipePage पर बात करने के लिए अपने module.exports बदलने की जरूरत नहीं TestPage

module.exports = RecipePage; 
+0

के माध्यम से नहीं जाता है, मैंने निर्यात विधि को "पकाने की विधि" से मिलान करने के लिए बदल दिया ... उम्मीद कर रहा था कि इसे ठीक करेगा लेकिन अभी भी कोई परिणाम नहीं मिलेगा .... कोई मौका सर्वर सर्वर के साथ ऐसा कुछ हो सकता है? – user3295436

+0

@ user3295436 आप इस पकाने की विधि का उपयोग कर रहे हैं? –

+0

पकाने की विधि एक पृष्ठ घटक है जिसे रेक्ट राउटर द्वारा बुलाया जाता है। यह एक "पृष्ठ" घटक है जो "ऐप" पैरेंट घटक – user3295436

16

यह मेरे साथ हुआ जब मेरे पास componentWillMount() उसी वर्ग में 2x परिभाषित किया गया था। यह रनटाइम त्रुटि उत्पन्न नहीं करता था। मैंने बस दूसरी परिभाषा को हटा दिया और चीजें काम करना शुरू कर दिया।

+0

त्वरित सुधार! धन्यवाद .. यह एक ईमानदार गलती प्रतीत होता है। यहां तक ​​कि मैंने एक ही कक्षा में 2 घटकडिडमाउंट जोड़ना समाप्त कर दिया जिसके परिणामस्वरूप पहले व्यक्ति को ओवरराइड किया गया .. धन्यवाद! – Zohair

संबंधित मुद्दे