प्रतिक्रिया

Question

में न्यूथस्टेट चेंज श्रोता पर नया फ़ायरबेस कैसे निकालें I प्रतिक्रिया-राउटर के साथ एक प्रतिक्रिया वेब ऐप में फायरबेस एथ लागू कर रहा हूं।

कोई उपयोगकर्ता पॉपअप साइन इन का उपयोग कर फेसबुक या Google के साथ (at/signin) में साइन इन करता है, तो यदि सफल होता है तो मैं मुख्य ऐप (/) पर जाता हूं। और

authListener() { 
    firebase.auth().onAuthStateChanged((user) => { 
     if (user) { 
     console.log('user changed..', user); 
     this.setState({ 
      User: { 
      displayName: user.displayName 
      } 
     }); 
     } else { 
     // No user is signed in. 
     browserHistory.push('/signin'); 
     } 
    }); 
    } 

सब कुछ ठीक काम करता है, जब मैं साइन आउट करने को छोड़कर (वापस/साइन-इन करने के लिए जाना: मुख्य अनुप्रयोग घटक में मैं एक प्रमाणन स्थिति परिवर्तन के लिए सुनने:

componentWillMount() { 
    this.authListener = this.authListener.bind(this); 
    this.authListener(); 
    } 

authListener प्रमाणन परिवर्तन के लिए सुनता है) और फेसबुक या गूगल का उपयोग कर फिर से साइन इन करें। फिर मुझे एक त्रुटि मिल रही है:

चेतावनी: सेटस्टेट (...): केवल घुड़सवार या बढ़ते घटक को अपडेट कर सकते हैं।

मुझे संदेह है कि अब अवांछित पिछला लॉग इन राज्य ऐप से ऑनएथस्टेट चेंज श्रोता अभी भी चल रहा है।

ऐप घटक अनमाउंट करते समय ऑनथस्टेट चेंज श्रोता को हटाने का कोई तरीका है?

Answer 1

आपके द्वारा स्थापित किए गए किसी भी श्रोताओं को भी टूटा जाना होगा।

आपके संदेह बहुत अधिक जगह पर हैं।

आपको अपने ऐप को प्रदूषित करने वाले किसी भी बचे हुए श्रोताओं को हटाने के लिए componentWillUnmount जीवन चक्र विधि का उपयोग करना चाहिए।

अपने authListener समारोह के अंदर आप (यह firebase.auth().onAuthStateChanged बुला का एक परिणाम के रूप में आप के लिए दिया जाता है) अपने घटक के अंदर श्रोता के लिए एक संदर्भ को बचाने की जरूरत:

श्रोता स्पष्ट करने के लिए, यहाँ प्रासंगिक कोड है। यह एक हुक होगा जो श्रोता को संदर्भित करेगा और इसे हटा देगा।

बजाय बस इसे बुलाने की, इस कोड को इस तरह के

this.fireBaseListener = firebase.auth().onAuthStateChanged ... 

और जब आपके घटक अन-माउंट के रूप में दिए गए मान बचाने के लिए, का उपयोग करें:

componentWillUnmount() { 
    this.fireBaseListener && this.fireBaseListener(); 
    this.authListener = undefined; 
}