ReactJS घटकों को AJAX कॉल को प्रोप से राज्य को अपडेट करने के लिए कब करना चाहिए?

मेरे पास एक प्रतिक्रिया घटक है जो किसी इकाई के बारे में जानकारी प्रदर्शित करता है। इकाई की आईडी एक संपत्ति के माध्यम से पारित किया जाता है। घटक इकाई को लाने के लिए "घटकडिडमाउंट" में एक AJAX कॉल प्रारंभ करता है और जब कॉल पूर्ण/विफल होता है तो अद्यतन स्थिति होती है।ReactJS घटकों को AJAX कॉल को प्रोप से राज्य को अपडेट करने के लिए कब करना चाहिए?

यह ठीक काम करता है सिवाय इसके कि घटक इकाई डेटा बदलता है (प्रोप के माध्यम से) नया डेटा नहीं लाता है।

मैंने "घटकWillReceiveProps" में एक कॉल शुरू करने का प्रयास किया है, लेकिन उस चरण में घटक अभी भी पुराने गुण सेट है। मुझे AJAX कॉल विधि पर अगलीप्रॉप पास करना होगा और यह सही प्रतीत नहीं होता है।

किसी संपत्ति को बदलने के जवाब में घटक को असीमित रूप से अपडेट करने का सबसे अच्छा/साफ तरीका क्या है?

स्रोत

2015-06-08 David Tinker

मुझे लगता है कि आप सबसे अच्छा पल उठाया। दस्तावेज़ों से: 'this.setState()' का उपयोग करके राज्य को अद्यतन करके 'रेंडर() 'कहा जाता है, इससे पहले एक प्रो ट्रांज़िशन पर प्रतिक्रिया करने का अवसर के रूप में इस (' घटकWillReceiveProps') का उपयोग करें। पुरानी प्रोप को इस.प्रॉप के माध्यम से एक्सेस किया जा सकता है। इस फ़ंक्शन के भीतर 'this.setState()' को कॉल करने से अतिरिक्त रेंडर ट्रिगर नहीं होगा। दूसरी तरफ, यदि आप कॉल से पहले घटक को अपडेट करना चाहते हैं, तो मुझे लगता है कि 'घटकडिड अपडेट' वह है जिसे आप ढूंढ रहे हैं। – gcedo

मेरा सुझाव है कि आप अपने डेटा हैंडलिंग को केंद्रीकृत करने पर विचार करें ताकि इन प्रकार के प्रवाहों को प्रबंधित करना आसान हो। – WiredPrairie

हाँ, मुझे लगता है कि पिता को उस क्रिया को निष्पादित करना चाहिए जो स्टोर में AJAX कॉल को ट्रिगर करता है। फिर स्टोर से प्राप्त डेटा को प्रोप के रूप में बच्चों को पास करें। – gcedo

-2

आप सही हैं, componentWillReceiveProps में कॉल करने से यह संभालने का सबसे अच्छा तरीका नहीं होगा।

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

स्रोत

2015-06-08 19:17:04

मैंने प्रश्न को अलग करने के लिए बहुत सी चीजों को सरल बना दिया है। हमारे ऐप में घटक वास्तव में AJAX कॉल नहीं करता है (एपीआई परत वह करता है) और सीधे डेटा नहीं प्राप्त करता है, यह बाओबाब से आता है। लेकिन समस्या वही बनी हुई है: एक घटक संपत्ति परिवर्तन को एसिंक राज्य अपडेट को एक या दूसरे तरीके से ट्रिगर करने की आवश्यकता होती है। –

मुझे यहां फ्लक्स के लिए उपयोग केस नहीं दिख रहा है, लेखक बस प्रोप परिवर्तन पर घटक को रीफ्रेश करना चाहता है। – Jacka

मैं भी प्रतिक्रिया करने के लिए नया हूं, इसलिए फ्लक्स आर्किटेक्चर मेरे लिए थोड़ा डरावना है। मैं यह कर रहा हूँ बिल्कुल के रूप में आप ने कहा, AJAX के माध्यम से प्रारंभिक डेटा लोड करने के componentWillMount का उपयोग कर, और फिर componentWillReceivePropsnextProps के साथ नए डेटा लोड करने के लिए फिर से यदि/जब रंगमंच की सामग्री को बदलें:

var Table = React.createClass({ 
    getInitialState: function() { 
    return { data: [] }; 
    }, 

    componentWillMount: function(){ 
    this.dataSource(); 
    }, 

    componentWillReceiveProps: function(nextProps){ 
    this.dataSource(nextProps); 
    }, 

    dataSource: function(props){ 
    props = props || this.props; 

    return $.ajax({ 
     type: "get", 
     dataType: 'json', 
     url: '/products?page=' + props.page + "&pageSize=" + props.pageSize 
    }).done(function(result){ 
     this.setState({ data: result }); 
    }.bind(this)); 
    }, 

    render: function() { 
    return (
     <table className="table table-striped table-bordered"> 
     <Head /> 
     <Body data={this.state.data}/> 
     </table> 
    ); 
    } 
});

स्रोत

2015-12-01 13:26:05 wnm

जब आप फ्लक्स मार्ग पर जाने से परहेज कर रहे हैं तो यह उपयोग करने के लिए बहुत अधिक पैटर्न है। डेटा लाने और इसे प्रस्तुत करने के बीच स्पष्ट पृथक्करण करने पर विचार करने के लिए एक रिफैक्टरिंग, 'वापसी <टेबलव्यू डेटा = {this.state.data} /> ' –

घटक विल्लमाउंट() को तुरंत पहले आवंटित करने के लिए कुछ पूरी तरह से अनजान करना होगा। बढ़ता हुआ होता है। इसे रेंडर() से पहले कहा जाता है, इसलिए इस विधि में सिंक्रनाइज़ स्थिति को सेट करने से पुन: प्रतिपादन ट्रिगर नहीं होगा। इस विधि में किसी भी दुष्प्रभाव या सदस्यता शुरू करने से बचें। –

ReactJS घटकों को AJAX कॉल को प्रोप से राज्य को अपडेट करने के लिए कब करना चाहिए?

उत्तर

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