होम·एरर संदेश

react · JavaScript

संदेश

Too many re-renders. React limits the number of renders to prevent an infinite loop.

इसका मतलब

किसी render ने state बदला, उस state ने फिर render कराया, और React ने अनंत चक्र रोकने के लिए उसे काट दिया। लगभग हमेशा यह वहाँ function बुला देना होता है जहाँ उसे भेजना था: onClick={setOpen(true)} हर render पर चल जाता है, और होना चाहिए onClick={() => setOpen(true)}। दूसरे आम रूप हैं — render के मुख्य भाग में सीधे state बदलना, और ऐसा useEffect जिसकी dependency सूची में वही मान है जिसे वह अद्यतन करता है। state बदलने का काम event handler या useEffect के भीतर ले जाएँ, और यदि वह मान render के दौरान गणना से मिल सकता है तो सोचें कि उसे state होना ही चाहिए या नहीं।

सुधार

इसका एक-लाइन कमांड नहीं है। व्याख्या में लिखा है कि क्या देखना है।

कौन देता है
react
JavaScript
15

browser और node की त्रुटियाँ आमतौर पर यही बताती हैं कि क्या टूटा, यह नहीं कि वह मान ऐसा क्यों बना — आपने undefined पढ़ा, वह function नहीं था, वह JSON नहीं था — इसलिए सुधार की जगह उस पंक्ति से ऊपर है जिसने त्रुटि फेंकी, और ?. तथा डिफ़ॉल्ट मानों से केवल उस पंक्ति को चुप कराने पर वही समस्या और दूर जाकर, और कठिन रूप में लौट आती है।

एरर संदेश कैसे पढ़ें

  • पहली पंक्ति से पढ़ें। जितना नीचे जाएँगे उतना वह औज़ार के भीतर की बात है; कारण आम तौर पर सबसे ऊपर लिखा होता है।
  • फ़ाइल का नाम और पंक्ति संख्या दिखे तो वहीं से शुरू करें — stack का सबसे ऊपरी frame नहीं, बल्कि वह सबसे ऊपरी पंक्ति जिसमें आपकी लिखी फ़ाइल का नाम हो।
  • संदेश को जैसा है वैसा खोजें, पर पहले अपने paths और variable नाम हटा दें — वही खोज को अटकाते हैं।
  • वही स्थिति औज़ार के हर संस्करण में अलग शब्दों में आती है। नतीजे बेमेल लगें तो संस्करण संख्या भी जोड़ें।
  • कोई सुधार चिपकाने से पहले देख लें कि वह क्या फेंक देगा। इनमें कुछ पलटे नहीं जा सकते।

अक्सर पूछे जाने वाले सवाल

Q. “Too many re-renders. React limits the number of renders to prevent an infinite loop.” का क्या मतलब है?

किसी render ने state बदला, उस state ने फिर render कराया, और React ने अनंत चक्र रोकने के लिए उसे काट दिया। लगभग हमेशा यह वहाँ function बुला देना होता है जहाँ उसे भेजना था: onClick={setOpen(true)} हर render पर चल जाता है, और होना चाहिए onClick={() => setOpen(true)}। दूसरे आम रूप हैं — render के मुख्य भाग में सीधे state बदलना, और ऐसा useEffect जिसकी dependency सूची में वही मान है जिसे वह अद्यतन करता है। state बदलने का काम event handler या useEffect के भीतर ले जाएँ, और यदि वह मान render के दौरान गणना से मिल सकता है तो सोचें कि उसे state होना ही चाहिए या नहीं।

Q. इसे कैसे ठीक करें?

एक-लाइन कमांड नहीं है। ऊपर की व्याख्या में लिखा है कि क्या देखना है।

Q. यह कौन-सा औज़ार देता है?

react। यह JavaScript में आता है, और संदेश 14 शब्दों का है।

साथ आने वाले एरर