क्या यह जांचने का कोई तरीका है कि प्रतिक्रिया घटक अनमाउंट किया गया है या नहीं?

Question

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

Answer 1

के बाद से isMounted() आधिकारिक तौर पर पदावनत किया जा रहा है, तो आप अपने घटक में ऐसा कर सकते हैं:

componentDidMount() { 
    this._ismounted = true; 
} 

componentWillUnmount() { 
    this._ismounted = false; 
} 

अपनी खुद की state चर को बनाए रखने का यह पैटर्न ReactJS दस्तावेज में विस्तृत है: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Answer 2

मैं कि पाया घटक अनमाउंट किया जाएगा, इस var

Answer 3

मुझे यहां मिला क्योंकि मैं polling एपीआई को रोकने के लिए एक रास्ता तलाश रहा था।

react docswebsocket केस को कवर करता है, लेकिन मतदान नहीं करता है।

तरह से मैं यह

// React component 
let allowPolling = true 

React.createClass({ 
    poll() { 
     if (!allowPolling) { 
      return 
     } 
     // otherwise, call the api 
    } 
    componentWillMount() { 
     allowPolling = true 
    } 
    componentWillUnmount() { 
     allowPolling = false 
    } 
}) 

यह काम करता है के आसपास काम किया। आशा है कि यह मदद करता है

कृपया,

Answer 4

मुझे लगता है कि शुभम जवाब एक समाधान के लोगों का उपयोग बंद करने के लिए अपने कोड संक्रमण करना होगा कि के लिए प्रतिक्रिया ने सुझाव दिया है मुझे पता है तुम लोग इस बात के लिए किसी भी नाकाम रहने के परीक्षण का मामला जानते हैं कि चलो =] isMounted विरोधी पैटर्न।

यह आवश्यक नहीं है, लेकिन यह इस समस्या के वास्तविक समाधानों को सूचीबद्ध करने योग्य है।

The article linked by Shubham इस विरोधी पैटर्न से बचने के लिए 2 सुझाव प्रदान करता है। जिसकी आपको आवश्यकता है, उस पर निर्भर करता है कि जब आप घटक को अनमाउंट करते हैं तो आप सेटस्टेट को क्यों कॉल कर रहे हैं।

अगर आप अपने घटक में एक फ्लक्स दुकान का उपयोग कर रहे हैं, तो आप componentWillUnmount में सदस्यता समाप्त करना होगा

class MyComponent extends React.Component { 
    componentDidMount() { 
    mydatastore.subscribe(this); 
    } 
    render() { 
    ... 
    } 
    componentWillUnmount() { 
    mydatastore.unsubscribe(this); 
    } 
} 

आप ES6 वादा करता है, आप करने के लिए आपके वादा रैप करने के लिए आवश्यकता हो सकती है का उपयोग करते हैं यह रद्द करने योग्य है।

const cancelablePromise = makeCancelable(
    new Promise(r => component.setState({...}})) 
); 

cancelablePromise 
    .promise 
    .then(() => console.log('resolved')) 
    .catch((reason) => console.log('isCanceled', reason.isCanceled)); 

cancelablePromise.cancel(); // Cancel the promise 

जुड़ा हुआ आलेख में और makeCancelable बारे में पढ़ें।

निष्कर्ष में, चर सेट करके और समस्या को घुमाने के द्वारा इस समस्या को पैच करने का प्रयास न करें, समस्या की जड़ पर जाएं। यदि आप किसी के साथ आ सकते हैं तो कृपया अन्य आम मामलों के साथ टिप्पणी करें।