दिलचस्प पोस्ट
जावा में कर्ल का उपयोग कैसे करें? मैं एंड्रॉइड एप्लिकेशन के ढेर के आकार के उपयोग को कैसे पहचानूं? 2 ज्ञात मानों के बीच एक स्ट्रिंग खोजें सीज़े शैली विशेषता गतिशील रूप से कोणीय जेएस में लागू करें डालें मोड निकास पर एक कैरेक्टर को वापस करने से कर्सर को रोकें टुकड़ा एक और टुकड़ा मुद्दे पर Backbone.js मॉडल डेटा को सहेजने के तरीके? जेएसएफ प्रबंधित-बीन्स के विभिन्न प्रकार के बीच भेदभाव करना सी संरचना स्मृति लेआउट? JSF 2 में सत्र समाप्ति और ViewExpiredException को कैसे नियंत्रित करें? SQL सर्वर में चलने की कुल गणना करें जारी रखने से पहले पूरा करने के लिए एकाधिक एसिंक्रोनस कॉल की प्रतीक्षा कर रहा है एनजीएक्स कनेक्शन रीसेट, यूएएसजीसी की प्रतिक्रिया खो गई Log4J: लॉगर इंस्टेंस बनाने की रणनीतियां कैसे JFrame पृष्ठभूमि पारदर्शी सेट करने के लिए, लेकिन JPanel या JLabel पृष्ठभूमि अपारदर्शी?

React.js में सरणी बच्चों के लिए अद्वितीय कुंजी को समझना

मैं एक प्रतिक्रिया घटक का निर्माण कर रहा हूं जो एक JSON डेटा स्रोत को स्वीकार करता है और एक क्रमबद्ध तालिका बनाता है।
प्रत्येक डायनेमिक डेटा पंक्तियों में यह एक अनन्य कुंजी है, लेकिन मुझे अभी भी एक त्रुटि मिल रही है:

सरणी में प्रत्येक बच्चे को एक अद्वितीय "कुंजी" सहारा होना चाहिए
TableComponent की रेंडर विधि की जांच करें

मेरा TableComponent विधि रिटर्न प्रस्तुत करना:

 <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> 

TableHeader घटक एक एकल पंक्ति है और इसके पास एक अनन्य कुंजी भी है।

rows में प्रत्येक row एक अद्वितीय कुंजी के साथ एक घटक से बनाई गई है:

 <TableRowItem key={item.id} data={item} columns={columnNames}/> 

और TableRowItem इस तरह दिखता है:

 var TableRowItem = React.createClass({ render: function() { var td = function() { return this.props.columns.map(function(c) { return <td key={this.props.data[c]}>{this.props.data[c]}</td>; }, this); }.bind(this); return ( <tr>{ td(this.props.item) }</tr> ) } }); 

अनूठे कुंजी प्रॉप त्रुटि क्या है?

Solutions Collecting From Web of "React.js में सरणी बच्चों के लिए अद्वितीय कुंजी को समझना"

आपको प्रत्येक बच्चे के साथ-साथ बच्चों के अंदर प्रत्येक तत्व के लिए एक कुंजी जोड़नी चाहिए।

इस तरह से प्रतिक्रिया न्यूनतम डोम परिवर्तन को संभाल सकते हैं।

आपके कोड में, प्रत्येक <TableRowItem key={item.id} data={item} columns={columnNames}/> कुंजी के बिना कुछ बच्चों को उनके अंदर प्रस्तुत करने का प्रयास कर रहा है

इस उदाहरण की जांच करें

Div के अंदर <b></b> तत्व से key={i} निकालने का प्रयास करें (और कंसोल की जांच करें)

नमूना में, अगर हम <b> तत्व के लिए एक कुंजी नहीं देते हैं और हम केवल object.city को अपडेट करना चाहते हैं, तो प्रतिक्रिया के लिए पूरी पंक्ति बनाम बस तत्व की आवश्यकता है।

यहां कोड है:

 var data = [{name:'Jhon', age:28, city:'HO'},{name:'Onhj', age:82, city:'HN'},{name:'Nohj', age:41, city:'IT'}] var Hello = React.createClass({ render: function() { var _data = this.props.info; console.log(_data); return( <div> {_data.map(function(object, i){ return <div className={"row"} key={i}> {[ object.name , <b className="fosfo" key={i}> {object.city} </b> , // remove the key object.age ]} </div>; })} </div> ); } }); React.render(<Hello info={data} />, document.body); 

सामंजस्य में चाबियों के महत्व पर दस्तावेज़ीकरण पर प्रतिक्रिया दें: कुंजी

सरणियों पर जाने पर सावधान रहें !!

यह एक सामान्य गलत धारणा है कि एरे में तत्व के सूचक का उपयोग करने से त्रुटि को दबाने का एक स्वीकार्य तरीका हर किसी के साथ परिचित है:

 Each child in an array should have a unique "key" prop. 

हालांकि, यह नहीं है! यह विरोधी-पैटर्न है जो कुछ स्थितियों में अवांछित व्यवहार को जन्म दे सकता है

key प्रोप को समझना

प्रतिक्रिया घटक-टू-डोम एलिमेंट रिश्शन को समझने के लिए key प्रोप का उपयोग करता है, जिसे फिर सामंजस्य प्रक्रिया के लिए उपयोग किया जाता है । इसलिए यह महत्वपूर्ण है कि कुंजी हमेशा अनन्य रहती है , अन्यथा एक अच्छा मौका है, ये तत्व तत्वों को मिश्रण करेगा और गलत एक को बदल देगा। यह भी महत्वपूर्ण है कि इन चाबियाँ सर्वश्रेष्ठ प्रदर्शन बनाए रखने के लिए सभी पुन: रेंडर में स्थिर रहें

कहा जा रहा है, एक हमेशा ऊपर लागू करने की जरूरत नहीं है, बशर्ते यह ज्ञात है कि सरणी पूरी तरह स्थिर है हालांकि, जब भी संभव हो सर्वोत्तम अभ्यासों को प्रोत्साहित किया जाता है

एक प्रतिक्रिया डेवलपर ने इस GitHub मुद्दे में कहा:

  • कुंजी वास्तव में प्रदर्शन के बारे में नहीं है, यह पहचान के बारे में अधिक है (बदले में बेहतर प्रदर्शन की ओर जाता है) यादृच्छिक रूप से सौंपा और बदलते मूल्य पहचान नहीं हैं
  • हम अपने डेटा को मॉडल किए जाने के बारे में जानने के बिना वास्तविक रूप से कुंजी प्रदान नहीं कर सकते हैं। मुझे सुझाव है कि आप किसी प्रकार के हैशिंग फ़ंक्शन का उपयोग कर सकते हैं यदि आपके पास आईडी नहीं है
  • हमारे पास पहले से ही आंतरिक कुंजियां हैं जब हम सरणियों का उपयोग करते हैं, लेकिन वे सरणी में अनुक्रमणिका हैं। जब आप एक नया तत्व सम्मिलित करते हैं, तो उन कुंजी गलत हैं

संक्षेप में, एक key होना चाहिए:

  • अनोखा – एक चाबी एक भाई के घटक के समान नहीं हो सकती।
  • स्थैतिक – रेंडर के बीच एक कुंजी को कभी भी बदलना नहीं चाहिए

key प्रोप का उपयोग करना

ऊपर दिए गए स्पष्टीकरण के अनुसार, निम्नलिखित नमूनों का ध्यानपूर्वक अध्ययन करें और जब संभव हो, तो अनुशंसित दृष्टिकोण लागू करने का प्रयास करें।


खराब (संभावित)

 <tbody> {rows.map((row, i) => { return <ObjectRow key={i} />; })} </tbody> 

यह तर्कसंगत रूप से सबसे सामान्य गलती है जब प्रतिक्रिया में एक सरणी पर दोबारा चलती है। यह दृष्टिकोण ठीक काम करेगा जब तक कि कोई तत्व जोड़ा, या हटाया नहीं जा सकता, rows सरणी। यदि आप कुछ स्थिर है, तो यह पूरी तरह से मान्य है (जैसे आपके नेविगेशन मेनू में लिंक की एक सरणी)। आधिकारिक दस्तावेजों में इस विस्तृत व्याख्या को देखें।

यहां एक कोड स्निपेट है जो key रूप में सरणी के आइटम इंडेक्स का उपयोग करने के जोखिम को दर्शाता है:

 class MyApp extends React.Component { constructor() { super(); this.state = { arr: ["Item 1"] } } click = () => { this.setState({ arr: ['Item ' + (this.state.arr.length+1)].concat(this.state.arr), }); } render() { return( <div> <button onClick={this.click}>Add</button> <ul> {this.state.arr.map( (item, i) => <Item key={i} text={"Item " + i}>{item + " "}</Item> )} </ul> </div> ); } } const Item = (props) => { return ( <li> <label>{props.children}</label> <input value={props.text} /> </li> ); } ReactDOM.render(<MyApp />, document.getElementById("app")); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>