दिलचस्प पोस्ट
IOException: प्रक्रिया फ़ाइल 'फ़ाइल पथ' का उपयोग नहीं कर सकती क्योंकि यह किसी अन्य प्रक्रिया द्वारा उपयोग की जा रही है अन्य HTML के साथ <body> में <style> टैग का उपयोग करना TextView बोल्ड पर एक विशिष्ट टेक्स्ट कैसे बनाएं Sys अपरिभाषित है क्या जावा स्विंग के लिए कोई भी अच्छी और मुफ्त दिनांक और समय पिकर उपलब्ध है? स्ट्रिंग में प्रत्येक 2 तत्व डालने का पायथनिक तरीका क्या सीएसएस कक्षाओं के नामों को बनाने के लिए कोई वैकल्पिक उपाय है जो संख्याओं के साथ शुरू होता है? PHP: मैं फ़ाइल बनाने की तारीख कैसे प्राप्त करूं? PHP लिप्यांतरण GCC / G ++ कंपाइलर में -pedantic का उपयोग करने का उद्देश्य क्या है? वर्तमान स्क्रिप्ट का पूर्ण पथ प्राप्त करें jQuery.getJSON – अभिगम नियंत्रण-अनुमति-मूल समस्या java.text.ParseException: अप्रभावी तिथि फ़ंक्शन पॉइंटर्स और फ़ंक्शन का पता क्या R_X86_64_32S और R_X86_64_64 पुनर्स्थापन मतलब क्या है?

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> ) } }); 

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

वेब के समाधान से एकत्रित समाधान "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>