मुझे यह त्रुटि मिल रही है - एक अनमाउंट घटक पर एक प्रतिक्रिया राज्य अद्यतन नहीं कर सकता। यह एक नो-ऑप है, लेकिन यह आपके एप्लिकेशन में मेमोरी लीक को इंगित करता है। ठीक करने के लिए, एक useEffect क्लीनअप फ़ंक्शन में सभी सदस्यता और अतुल्यकालिक कार्यों को रद्द करें।
यहां मेरा उपयोग प्रभाव हुक है, मैंने यह जांचने के लिए माउंटेड नामक एक रेफरी का उपयोग किया है कि घटक अनमाउंट किया गया है या नहीं, लेकिन घटक के अनमाउंट होने पर मुझे अभी भी त्रुटि मिल रही है। (त्रुटि दिखाई देने में लगभग एक मिनट का समय लगता है)।
useEffect(() => {
if(mounted.current){
if(mincounter === 0 && hrcounter > 0){
setHrcounter(hrcounter - 1);
setMincounter(60);
mincounter > 0 && setTimeout(() => setMincounter(mincounter - 1) , 1000*60)
}else if (mincounter === 0 && hrcounter === 0){
submitHandler()
}else{
mincounter > 0 && setTimeout(() => setMincounter(mincounter - 1) , 1000*60)
}
}
return () => {
mounted.current = false
console.log('info tab unmounting', mounted.current);
}
}, [mincounter, hrcounter, submitHandler,setHrcounter,setMincounter]);
तिया
2 जवाब
const [subscriptions, setSubscriptions] = useState([]);
मैं आमतौर पर अपने सभी सब्सक्रिप्शन को अपने कंपोनेंट स्टेट पर स्टोर करता हूं और फिर उन्हें कॉल करता हूं जब कंपोनेंट अन माउंटेड होगा (useEffect हुक की सफाई में)
इस कदर:
useEffect(() => {
const subscription1 = ...
const subscription2 = ...
// When you create subscriptions, just store them on state
setSubscriptions([...subscriptions, subscription1, subscription2]);
// Cleanup (Detach subscriptions)
return () => subscriptions.forEach(subscription => subscription)
},[])
आप त्रुटि देख रहे हैं क्योंकि घटक अनमाउंट होने के बाद आपका कोड टाइमआउट कॉलबैक में setMincounter को कॉल कर रहा है। अपने अनमाउंट चेक को टाइमआउट कॉलबैक के अंदर ले जाएं।
आपके कोड में एक और समस्या यह है कि आप किसी भी सफाई पर mounted.current से false सेट कर रहे हैं, न कि केवल अनमाउंट। इसका मतलब है कि प्रभाव कॉलबैक केवल एक बार चलेगा और फिर हर बार अगर स्थिति पर शॉर्ट-सर्किट होगा। आइए इसके बजाय अपने संभावित असुरक्षित कॉलबैक को नो-ऑप से बदलकर साफ करें। वैकल्पिक रूप से आप टाइमआउट रद्द करके सफाई कर सकते हैं।
यहाँ निश्चित कोड है।
useEffect(() => {
let safeSetMincounter = setMinCounter;
if(mincounter === 0 && hrcounter > 0){
setHrcounter(hrcounter - 1);
setMincounter(60);
mincounter > 0 && setTimeout(() => safeSetMincounter(mincounter - 1), 1000*60)
}else if (mincounter === 0 && hrcounter === 0){
submitHandler()
}else{
mincounter > 0 && setTimeout(() => safeSetMincounter(mincounter - 1), 1000*60)
}
return () => void (safeSetMincounter = () => undefined);
}, [mincounter, hrcounter, submitHandler,setHrcounter,setMincounter]);
कोड में अभी भी कई अन्य समस्याएं हैं लेकिन वे इस प्रश्न के लिए विषय-वस्तु नहीं हैं।