क्यों इस त्रुटि करता मौजूद हैं: "अपरिवर्तनीय उल्लंघन: एक मौजूदा राज्य संक्रमण के दौरान अद्यतन नहीं कर सकते"

Question

मैं एक बड़ी आवेदन में इस त्रुटि में चल रहे हो रहे हैं (लेकिन मैं वास्तव में यकीन है कि जहां नहीं कर रहा हूँ):

Uncaught Error: Invariant Violation: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

मुझे संदेह है कि यह setStatesetTimeout या setInterval के अंदर उपयोग करने का परिणाम हो सकता है।

जो मुझे मेरे असली प्रश्न पर ले जाता है: यह त्रुटि क्यों मौजूद है? क्या कुछ वैचारिक कारण हैं जो मुझे याद आ रहा है क्यों ReactJS सिर्फ राज्य और प्रोप में बदलाव नहीं करता है? मुझे लगता है कि कोई कारण है, तो मुझे आवेदन जटिलता और/या दौड़ की स्थिति से परहेज करना है ...

मेरा अगला प्रश्न तब होगा: प्रतिक्रिया के बाहर एक घटक को अद्यतन करने का सही तरीका क्या है (उदाहरण के लिए कुछ एसिंक्रोनस घटना के दौरान) ताकि यह त्रुटि न हो?

संपादित करें:

कुछ इस समस्या की आगे की खुदाई बाद, ऐसा लगता अपराधी वास्तव में मैं उपयोग कर रहा हूँ (ElectronJS, औपचारिक रूप से एटम शैल) अंतर्निहित मंच है। असल में, इलेक्ट्रॉन जेएस क्रोमियम और नोडजेएस को एक साथ जोड़ता है। मैं कुछ एसिंक्रोनस करने के लिए एक नोडजेएस एपीआई का उपयोग कर रहा था और यह तब समाप्त होता है जब यह समाप्त हो जाता है, तो इलेक्ट्रॉन जीएस बस कॉल स्टैक पर वापस लौट आएगा, जहां यह छोड़ा गया था, इवेंट लूप को पूरी तरह से छोड़कर और इस प्रकार प्रतिक्रिया के साथ दौड़ की स्थिति पैदा कर रहा था।

Answer 1

समस्या यह है कि setState एक पुन: प्रस्तुत करने का कारण बन जाएगा (संभावित रूप से, shouldComponentUpdate के आधार पर)। यदि आपके पास render फ़ंक्शन के भीतर कॉल किया गया था, तो यह अभी तक एक और रेंडर ट्रिगर करेगा। आप फिर से प्रस्तुत करने के अनंत लूप में समाप्त हो जाएगा। ऐसा कुछ भी नहीं है जो आपको कुछ एसिंक्रोनस ऑपरेशन (वास्तव में यह बहुत आम है) के परिणामस्वरूप setState का उपयोग करने से रोकता है। यह तब तक ठीक है जब तक कि यह render या किसी अन्य घटक के किसी अन्य जीवन चक्र विधि में नहीं है जो एक राज्य अद्यतन पर चलाया जाता है (shouldComponentUpdate एक और है क्योंकि आप एक ही तरह से एक अनंत लूप के साथ समाप्त हो जाते हैं)।

Answer 2

यह प्राप्त करने का एक तरीका फ़्लक्स पैटर्न का उपयोग करना है और आपके टाइमआउट स्टोर में बदलावों को ट्रिगर करना है। यह परिवर्तनों को उनके जीवन चक्र के हिस्से के रूप में इच्छुक घटकों के प्रसार में आने का कारण बनता है।