React: इनपुट फ़ील्ड के प्रकार और मान को बदलते समय चेतावनी

लगता है कि हम खराब क्रम में प्रोप परिवर्तन लागू कर रहे हैं। इस अधिकार को प्राप्त करने का तर्क सामान्य रूप से (ज्ञात प्रकारों के लिए) हल करने योग्य है, लेकिन अगर हम DOM ऑपरेशन को कम से कम करना चाहते हैं, तो इसे पूर्ण करना जटिल हो सकता है।

मैं हैरान हूँ कि इस विशेष मामले समस्याग्रस्त है क्योंकि इस कोड को यह सुनिश्चित करना चाहिए कि हम हमेशा के लिए सेट .type एक पर किसी भी अन्य विशेषताओं से पहले <input> :

https://github.com/facebook/react/blob/0b1fd186855a48dff78987f13466cec1e579b78c/src/renderers/dom/client/wrappers/ReactDOMInput.js#L74

यकीन नहीं है कि क्यों डिजाइन के रूप में काम नहीं कर रहा है। यह मेरे लिए पूरी तरह से स्पष्ट नहीं है कि क्या सेटिंग प्रकार हमेशा इन जैसे मामलों को हल करता है या पहले प्रकार सेट करना बस दूसरे तरीके को स्विच करते समय एक ही चेतावनी का कारण होगा।

(# 2242 भी देखें, जो कुछ ऐसा है जो हम करना चाहते हैं, लेकिन वर्तमान प्रणाली में सफाई से लागू करना मुश्किल हो सकता है। यह आसान था जब हमारे पास इन घटकों के लिए पूर्ण समग्र आवरण थे लेकिन अब हम ऐसा नहीं करते हैं। प्रकार परिवर्तन आश्चर्यजनक हो सकते हैं क्योंकि इसका मतलब यह होगा कि घटक के जीवनकाल में घटक के जीवनकाल के दौरान परिवर्तन होता है जो हमारे पास कहीं और नहीं है।)

यहां सबसे आसान समाधान इनपुट पर key सेट करना है जो कि प्रकार के साथ बदलता है ताकि प्रकार बदलते समय एक नया इनपुट तत्व बनाया जाए।

Object.assign V8 ऑर्डर बग के कारण हो सकता है? या यह 15 से पहले था?

@gaearon यह अभी भी 15 रिलीज में है

@gurinderhans कौन सा ब्राउज़र? इसके अलावा, क्या आप एक jsfiddle प्रदान कर सकते हैं जो इस मुद्दे को प्रदर्शित करता है?

@jimfb यहाँ आप जाओ।
ब्राउज़र: क्रोम 50.0.2661.86 (64-बिट)
JSFiddle: https://jsfiddle.net/mb90na04/1/

क्रोम डिबगर के बाद मुझे यह मिला:
कोड की यह पंक्ति है, https://github.com/facebook/react/blob/master/src/renderers/dom/sared/ReactDOMComponent.js#L829 , जो https://github.com/ पर कॉल करने के बाद _updateDOMProperties को अपडेट करने के लिए अभी तक नहीं बुलाया गया है तत्व type विशेषता, इस प्रकार चेतावनी उत्पन्न होती है। एक बार _updateDOMProperties कॉल करने पर, type value होने से पहले सेट हो जाता है, जैसे कि यह माना जाता है और सब कुछ योजना के अनुसार होता है।

_ PS: कोर्स की, कॉल को ReactDOMInput.updateWrapper के अंदर, switch case अंदर चेतावनी को छापा जाता है, लेकिन कुछ अन्य मामलों के लिए यह आवश्यक हो सकता है क्योंकि मैं यह भी नोटिस करता हूँ कि तत्व type कहलाता है। textarea

आप प्रकार परिवर्तन के लिए जाँच कर सकते हैं, और मान सेट नहीं कर सकते, या अद्यतन प्रकार नहीं कर सकते हैं और फिर ReactDOMInput.updateWrapper अंदर मान सेट कर सकते हैं। मैं यह भी सोच रहा हूं कि <input> या <textarea> जैसे मामलों के लिए कॉल की आवश्यकता क्यों है

यहाँ इस मुद्दे को पुन: पेश करने वाला एक सरल मामला है: https://jsfiddle.net/97gr5e65/1/

यह केवल number से text बदलने पर ही प्रतीत होता है। मैं भी ओएस एक्स पर सफारी या फ़ायरफ़ॉक्स में चेतावनी को पुन: पेश करने में सक्षम नहीं हूं। यह ReactTestUtils का उपयोग करके भी नहीं लगता है।

यह जाँच करने के लिए एक दिलचस्प बग था, इसलिए मैंने आसपास कुछ प्रहार किया। मेरा प्रारंभिक विचार सिर्फ type value अद्यतन करने से पहले अद्यतन करना था। क्या यह समझदार है?

https://github.com/facebook/react/compare/master...ununzaker : nh-input-change-fix? Expand = 1?

यह बग को समाप्त करता है, लेकिन यह बहुत सरल है। उथला लगता है। तुम क्या सोचते हो?

हम स्थानांतरित कर सकते हैं .updateWrapper नीचे कॉल _updateDOMChildren कॉल (उन्हें getNativeProps कॉल से बाहर बंटवारे)? मुझे लगता है कि यहां सबसे अच्छा समाधान है और लगता है कि यह काम करना चाहिए।

हाँ। मैं इस पर परीक्षण कवरेज प्राप्त करने में भी सक्षम था। DOM द्वारा मान को शून्य कर दिया जाता है जब प्रकार बदलता है जैसे कि मान अब मान्य नहीं है, या यदि कोई नया मान असाइन किया गया है जो मान्य नहीं है।

असंबंधित, यह बहुत अच्छा है कि JSDOM इसे उठाता है।

Https://github.com/facebook/react/pull/7333 में किया

अभी भी संस्करण 16.4.1 साथ होता है