You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
#### टूटी हुई चैट इनपुट को ठीक करें {/*fix-a-broken-chat-input*/}
304
+
#### ब्रोकन चैट इनपुट को ठीक करें {/*fix-a-broken-chat-input*/}
305
305
306
306
एक मैसेज टाइप करें और "Send" पर क्लिक करें। आपको "Sent!" अलर्ट दिखाई देने से पहले तीन सेकंड कि देरी नोटिस होगी। इस देरी के दौरान, आप "Undo" बटन देख सकते हैं। उस पर क्लिक करें। यह "Undo" बटन "Sent!" मैसेज को रोकने के लिए होता है। यह `handleSend` के दौरान सेव की गई timeout ID के लिए [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) को कॉल करता है। हालांकि, "Undo" पर क्लिक करने के बाद भी, "Sent!" मैसेज दिखाई दे रहा है। इसका कारण खोजें और उसे ठीक करें।
307
307
308
308
<Hint>
309
309
310
-
`let timeoutID` जैसी साधी वेरिएबल्स फिर से रेंडर के बीच "जीवित नहीं रहते" क्योंकि हर रेंडर के साथ आपके कौम्पोनॅन्ट को फिर से चलाया जाता है (और इसके वेरिएबल्स को फिर से इनिशियलाइज़ किया जाता है)। क्या आपने timeout ID को कहीं और रखना चाहिए?
310
+
`let timeoutID` जैसी साधी वेरिएबल्स फिर से रेंडर के बीच "सर्वाइव" नहीं करता क्योंकि हर रेंडर के साथ आपके कौम्पोनॅन्ट को फिर से चलाया जाता है (और इसके वेरिएबल्स को फिर से इनिशियलाइज़ किया जाता है)। क्या आपने timeout ID को कहीं और रखना चाहिए?
311
311
312
312
</Hint>
313
313
@@ -360,7 +360,7 @@ export default function Chat() {
360
360
361
361
<Solution>
362
362
363
-
जब भी आपका कौम्पोनॅन्ट फिर से रेंडर होता है (जैसे कि जब आप state सेट करते हैं), सभी साधे वेरिएबल्स शुरुआत से इनिशियलाइज हो जाते हैं। इसीलिए आप `timeoutID` को लोकल वेरिएबल में सेव नहीं कर सकते और फिर भविष्य में दूसरे event-handler से इसे "देखने" की उम्मीद नहीं कर सकते है। इसके बजाय, इसे रेंडर के बीच संभालने वाले ref में स्टोर करें, जिसे React रेंडर के बीच संभालेगा।
363
+
जब भी आपका कौम्पोनॅन्ट फिर से रेंडर होता है (जैसे कि जब आप state सेट करते हैं), सभी लोकल वेरिएबल्स शुरुआत से इनिशियलाइज हो जाते हैं। इसीलिए आप `timeoutID` को लोकल वेरिएबल में सेव नहीं कर सकते और फिर भविष्य में दूसरे event-handler से इसे "देखने" की उम्मीद नहीं कर सकते है। इसके बजाय, इसे रेंडर के बीच संभालने वाले ref में स्टोर करें, जिसे React रेंडर के बीच संभालेगा।
364
364
365
365
<Sandpack>
366
366
@@ -413,7 +413,7 @@ export default function Chat() {
413
413
414
414
#### री-रेंडर होने में फेल होने वाले कौम्पोनॅन्ट को ठीक करें। {/*fix-a-component-failing-to-re-render*/}
415
415
416
-
यह बटन "चालू" और "बंद" दिखाने के बीच टॉगल करने के लिए है। हालांकि, यह हमेशा "बंद" दिखा रहा है। इस कोड में क्या गलत है? इसे ठीक करो।
416
+
यह बटन "On" और "Off" दिखाने के बीच टॉगल करने के लिए है। हालांकि, यह हमेशा "Off" दिखा रहा है। इस कोड में क्या गलत है? इसे ठीक करें।
417
417
418
418
<Sandpack>
419
419
@@ -461,9 +461,9 @@ export default function Toggle() {
461
461
462
462
</Solution>
463
463
464
-
#### डिबाउंसिंग को ठीक करें। {/*fix-debouncing*/}
464
+
#### डिबाउंसिंग को ठीक करें {/*fix-debouncing*/}
465
465
466
-
इस उदाहरण में, सभी बटन क्लिक हैंडलर ["डिबाउंस्ड"](https://redd.one/blog/debounce-vs-throttle) हैं। देखने के लिए कि यह क्या मतलब होता है, किसी एक बटन पर क्लिक करें। ध्यान दें कि मैसेज एक सेकंड बाद दिखाई देता है। अगर आप मैसेज के इंतजार में बटन दबाते रहते हैं, तो टाइमर रीसेट हो जाएगा। तो यदि आप बहुत जल्दी बटन को कई बार दबाते रहें, तो मैसेज दिखाई नहीं देगा, *जब तक* आप दबाना बंद नहीं करते। डिबाउंसिंग आपको कुछ एक्शन को तब तक डिले करने देता है जब तक यूजर "कुछ नहीं करता" है।
466
+
इस उदाहरण में, सभी बटन क्लिक हैंडलर ["डिबाउंस्ड"](https://redd.one/blog/debounce-vs-throttle) हैं। इसका क्या मतलब होता है देखने के लिए, किसी एक बटन पर क्लिक करें। ध्यान दें कि मैसेज एक सेकंड बाद दिखाई देता है। अगर आप मैसेज के इंतजार में बटन दबाते रहते हैं, तो टाइमर रीसेट हो जाएगा। तो यदि आप बहुत जल्दी बटन को कई बार दबाते रहें, तो मैसेज दिखाई नहीं देगा, *जब तक* आप दबाना बंद नहीं करते। डिबाउंसिंग आपको कुछ एक्शन को तब तक डिले करने देता है जब तक यूजर "कुछ-न-कुछ करता रहता है" है।
467
467
468
468
यह उदाहरण काम करता है, लेकिन इच्छित रूप से नहीं। बटन एक दूसरे से अलग नहीं हैं। समस्या देखने के लिए, उनमें से किसी एक बटन पर क्लिक करें, और फिर तुरंत दूसरे बटन पर क्लिक करें। आप उम्मीद करते हैं कि देरी के बाद, आप दोनों बटन के मैसेज देखेंगे। लेकिन केवल अंतिम बटन का मैसेज दिखाई देता है। पहले बटन का मैसेज खो जाता है।
एक ऐसी वेरिएबल जैसे `timeoutID` सभी कॉम्पोनेंट्स के बीच शेयर होती है। इसीलिए, दूसरे बटन पर क्लिक करने से पहले बटन के पेंडिंग टाइमआउट को रीसेट किया जाता है। इसे ठीक करने के लिए, आप ref में टाइमआउट रख सकते हैं। हर बटन को अपना अलग ref मिलेगा, इसलिए वे एक दूसरे को विरोध नहीं करेंगे। ध्यान दें कि दो बटनों पर तुरंत क्लिक करने से दोनों मैसेज दिखाई देंगे।
527
+
एक ऐसी वेरिएबल जैसे `timeoutID` सभी कौम्पोनॅन्टस के बीच शेयर होती है। इसीलिए, दूसरे बटन पर क्लिक करने से पहले बटन के पेंडिंग टाइमआउट को रीसेट किया जाता है। इसे ठीक करने के लिए, आप ref में टाइमआउट रख सकते हैं। हर बटन को अपना अलग ref मिलेगा, इसलिए वे एक दूसरे को विरोध नहीं करेंगे। ध्यान दें कि दो बटनों पर तुरंत क्लिक करने से दोनों मैसेज दिखाई देंगे।
इस उदाहरण में, "Send" बटन दबाने के बाद मैसेज दिखाई देने से पहले थोड़ा डिले होता है। "hello" टाइप करें, Send दबाएं, और फिर जल्दी से इनपुट को फिर से एडिट करें। आपकी एडिट करने के बावजूद, अलर्ट अभी भी "hello" दिखाएगा (जो बटन क्लिक [करते समय](/learn/state-as-a-snapshot#state-over-time) state की वैल्यू थी)।
582
582
583
-
आमतौर पर, एप्प में यह व्यवहार आपको चाहिए होता है। हालांकि, कुछ अवसरों में आपको एक ऐसा असिंक्रोनस कोड की ज़रूरत होती है जो स्टेट की*लेटेस्ट* वर्शन पढ़ सके। क्या आप ऐसे कोई तरीका सोच सकते हैं जिससे अलर्ट *करंट* इनपुट टेक्स्ट दिखाएँ ना की जो क्लिक के समय था।
583
+
आमतौर पर, एप्प में यह व्यवहार आपको चाहिए होता है। हालांकि, कुछ अवसरों में आपको एक ऐसा असिंक्रोनस कोड की ज़रूरत होती है जो स्टेट का*लेटेस्ट* वर्शन रीड कर सके। क्या आप ऐसे कोई तरीका सोच सकते हैं जिससे अलर्ट *करंट* इनपुट टेक्स्ट दिखाएँ ना की जो क्लिक के समय था।
584
584
585
585
<Sandpack>
586
586
@@ -615,7 +615,7 @@ export default function Chat() {
615
615
616
616
<Solution>
617
617
618
-
State [एक स्नैपशॉट की तरह](/learn/state-as-a-snapshot) काम करता है, इसलिए आप टाइमआउट जैसे असिंक्रोनस ऑपरेशन से state की लेटेस्ट वैल्यू पढ़ नहीं सकते। हालांकि, आप लेटेस्ट इनपुट टेक्स्ट को एक ref में रख सकते हैं। ref म्यूटेबल है, इसलिए आप कभी भी करंट प्रॉपर्टी को पढ़ सकते हैं। क्योंकि करंट टेक्स्ट रेंडरिंग के लिए भी इस्तेमाल किया जाता है, इस उदाहरण में, आपको *दोनों* state वेरिएबल (रेंडरिंग के लिए) *और* एक ref (टाइमआउट के समय इसे रीड करने के लिए) की जरुरत होगी। आपको करंट ref वैल्यू को मैन्युअल रूप से अपडेट करने की आवश्यकता होगी।
618
+
State [एक स्नैपशॉट की तरह](/learn/state-as-a-snapshot) काम करता है, इसलिए आप टाइमआउट जैसे असिंक्रोनस ऑपरेशन से state की लेटेस्ट वैल्यू रीड नहीं कर सकते। हालांकि, आप लेटेस्ट इनपुट टेक्स्ट को एक ref में रख सकते हैं। ref म्यूटेबल है, इसलिए आप कभी भी करंट प्रॉपर्टी को रीड कर सकते हैं। क्योंकि करंट टेक्स्ट रेंडरिंग के लिए भी इस्तेमाल किया जाता है, इस उदाहरण में, आपको *दोनों* state वेरिएबल (रेंडरिंग के लिए) *और* एक ref (टाइमआउट के समय इसे रीड करने के लिए) की जरुरत होगी। आपको करंट ref वैल्यू को मैन्युअल रूप से अपडेट करने की आवश्यकता होगी।
0 commit comments