React: जब आइटम का क्रम बदलता है तो अद्वितीय `कुंजी` के साथ सूची आइटम फिर से प्रस्तुत किए जाते हैं।

को निर्मित 15 जुल॰ 2018 · 3टिप्पणियाँ · स्रोत: facebook/react

क्या आप किसी सुविधा का अनुरोध करना चाहते बग की रिपोर्ट करना चाहते हैं?
कीड़ा

वर्तमान व्यवहार क्या है?
प्रत्येक आइटम तत्व पर अद्वितीय संपत्ति के रूप में key सेट के साथ आइटमों की एक सूची प्रस्तुत करते समय, यदि आइटम का क्रम पिछले रेंडर से बदलता है, तो आइटम तत्व जिनकी अनुक्रमणिका बदली जाती है, फिर से प्रस्तुत की जाती है (नया उदाहरण बनाया जाता है) - मौजूदा उदाहरण का उपयोग करना (कुंजी के माध्यम से मैप किया गया)।

उदाहरण के लिए https://codesandbox.io/s/r5p48kzop
प्रत्येक बॉक्स के साथ boxes एक सूची प्रस्तुत करना id , top , left & color सहारा। प्रत्येक 750ms हम boxes सरणी के अंदर सभी तत्वों के लिए ( top , left ) मानों को अपडेट करते हैं।

अद्यतन करते समय यदि तत्वों का क्रम नहीं बदलता है तो प्रत्येक बॉक्स अपनी नई स्थिति में एनिमेट करता है। हालाँकि, यदि हम लाइन 31 को अनकम्मेंट करते हैं जो बक्सों को फेरबदल करती है, तो केवल वही तत्व जो पिछली स्थिति से अपनी स्थिति बनाए रखते हैं, नए पदों पर चेतन करते हैं।

आप इस व्यवहार को सैंडबॉक्स में देख सकते हैं। _shuffle साथ कभी-कभी बक्से अपनी नई स्थिति में कूद जाते हैं जबकि _shuffle छूट के साथ वे हमेशा चेतन करते हैं।

यदि वर्तमान व्यवहार एक बग है, तो कृपया पुन: पेश करने के लिए कदम प्रदान करें और यदि संभव हो तो समस्या का न्यूनतम डेमो प्रदान करें। लिंक को अपने JSFiddle (https://jsfiddle.net/Luktwrdm/) या कोडसैंडबॉक्स (https://codesandbox.io/s/new) उदाहरण में नीचे पेस्ट करें:
https://codesandbox.io/s/r5p48kzop

अपेक्षित व्यवहार क्या है?
boxes के क्रम के बावजूद सभी बॉक्स तत्वों को अपनी नई स्थिति के अनुसार चेतन करना चाहिए क्योंकि उनके पास अद्वितीय key संपत्ति सेट है।

रिएक्ट के कौन से संस्करण और कौन से ब्राउज़र/ओएस इस समस्या से प्रभावित हैं?
प्रतिक्रिया 16.3.2 और 16.4.1 , क्रोम, मैकोज़।

स्रोत

dhruvparmar372

सबसे उपयोगी टिप्पणी

अरे @dhruvparmar372!

ऐसा लगता है कि यह डीओएम की एक सीमा है। इसे प्रदर्शित करने के लिए, मैंने यह JSFiddle बनाया जो दो डोम नोड्स के क्रम को बदलता है और फिर एक संक्रमण को ट्रिगर करने के लिए एक वर्ग लागू करता है।

यह पता चला है, आप ऑर्डर बदलने और एनीमेशन गुणों को अपडेट करने के बीच एक रिफ्लो ट्रिगर करके इस मुद्दे के आसपास काम कर सकते हैं।

मैंने आपके कोडसैंडबॉक्स में थोड़ा सा कोड जोड़ा है, यह तब दिखाई देता है जब एक घटक को रिएक्ट द्वारा <Box /> को एक वर्ग घटक के रूप में बदलकर और कंस्ट्रक्टर में एक अद्वितीय आईडी बनाकर फिर से बनाया जाता है। जैसा कि आप देख सकते हैं, आईडी एक जैसी रहेगी: https://codesandbox.io/s/jn42wvl343

इसके अलावा, मैंने अपडेट को दो setState s में विभाजित करके आपके उदाहरण में रीफ़्लो वर्कअराउंड लागू किया। पहला क्रम बदलेगा, फिर हम एक रिफ्लो ट्रिगर करेंगे, और बाद में स्थिति बदल देंगे। ऐसा लगता है कि क्रोम, फ़ायरफ़ॉक्स, सफारी और एज में ठीक काम करता है (कोडसैंडबॉक्स IE11 का समर्थन नहीं करता है इसलिए मैं उस ब्राउज़र पर परीक्षण नहीं कर सका)।

philipp-spiess 15 जुल॰ 2018

👍3

सभी 3 टिप्पणियाँ

अरे @dhruvparmar372!

philipp-spiess 15 जुल॰ 2018

👍3

अरे @ philipp-spiess इस मुद्दे को स्पष्ट करने और समाधान के लिए उदाहरणों के लिए धन्यवाद।

dhruvparmar372 15 जुल॰ 2018

नमस्ते, @ philipp-spiess

सूची छँटाई के साथ मुझे एक ही समस्या है
दुर्भाग्य से, उपरोक्त आपका कोडसैंडबॉक्स उदाहरण अब काम नहीं कर रहा है (

यहाँ एक उदाहरण है:
https://jsfiddle.net/9odLvbrx/
यह साधारण सीएसएस ट्रांज़िशन के साथ क्लिक पर आइटम सॉर्ट करता है।
मुद्दा यह है कि संक्रमण केवल चयनित आइटम पर दिखाई देता है और बाकी को छोड़ देता है।

मुझे पता है कि इस मुद्दे के आसपास कैसे काम करना है (कोड में टिप्पणी की गई है) लेकिन यह केवल उन सूचियों पर ठीक काम करता है जो आइटम मात्रा कभी नहीं बदलती हैं। तो अगर मैं आइटम जोड़ना या हटाना चाहता हूं - सामान अविश्वसनीय रूप से जटिल हो जाता है। मैं अपने उदाहरण में ऐसा करने के लिए आपके रिफ्लो अधिभार समाधान का उपयोग कैसे कर सकता हूं?

अग्रिम में धन्यवाद! मैं

akosarch 1 अप्रैल 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React: जब आइटम का क्रम बदलता है तो अद्वितीय `कुंजी` के साथ सूची आइटम फिर से प्रस्तुत किए जाते हैं।

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों