अभिकर्मक प्रतिक्रिया क्लोजरस्क्रिप्ट चेतावनी: एक सीक में प्रत्येक तत्व में एक अद्वितीय होना चाहिए: कुंजी

Question

मैंने here से दो साल की पुरानी प्रतिलिपि बनाई है। यह अब फिग्हेल के साथ काम कर रहा है और अभिकर्मक/प्रतिक्रिया का एक नवीनतम संस्करण का उपयोग करता है। मैं इस चेतावनी संदेश को अलग करने का एक सामान्य तरीका ढूंढ रहा हूं जो जावास्क्रिप्ट कंसोल पर आता है: Warning: Every element in a seq should have a unique :key। विचार सभी घटकों में एक उत्पन्न अद्वितीय मूल्य के साथ :key डालना है। फिर संदेशों को गायब होना चाहिए और मैं यह देखने की स्थिति में रहूंगा कि किन घटकों को अद्वितीय :key की आवश्यकता है। मेरी समस्या यह है कि भले ही एक अद्वितीय :key उन सभी में डाल दिया जा रहा है, चेतावनी संदेश अभी भी देखा गया है।

तो - क्या कोई मुझे बताएगा कि कौन सा घटक मैंने याद किया है या अन्यथा मैंने गलत क्या किया है? जैसा कि आप source (permalink) से देख सकते हैं मैंने दो घटकों में :key (gen-key) जोड़ा है: [:polyline {:key (gen-key) ... और [:svg {:key (gen-key) ... क्रमशः 43 और 68 पंक्तियों पर।

संपादित तो यह answer (permalink) कोड के मामले में वैसे भी है। लाइन 44 और 60 पर ^{:key (gen-key)} की नियुक्ति की तलाश करें।

ध्यान दें कि फ़ंक्शन gen-key डिबगिंग के लिए बनाया गया था। बदलने के लिए प्राकृतिक कुंजी।

(defn gen-key [] 
    (gensym "key-")) 

यहाँ और जिस तरह से ऊपर दिए गए लिंक में किया है::, बजाय मेटाडाटा के रूप में चाबी की तरह:

इस तरह आप gen-key लागू हो सकता है

(def uniqkey (atom 0)) 
(defn gen-key [] 
    (let [res (swap! uniqkey inc)] 
    (u/log res) 
    res)) 

Answer 1

पर Reagent Project site

(defn lister [items] 
    [:ul 
    (for [item items] 
    ^{:key item} [:li "Item " item])]) 

(defn lister-user [] 
    [:div 
    "Here is a list:" 
    [lister (range 3)]]) 

नोट

उदाहरण से:^{: कुंजी आइटम} हिस्सा ऊपर वास्तव में इस सरल उदाहरण में आवश्यक नहीं है, लेकिन करने के लिए एक अद्वितीय कुंजी संलग्न में प्रत्येक आइटम घटकों की गतिशील रूप से जेनरेट की गई सूची अच्छी प्रैक्टिस है, और बड़ी सूची के लिए प्रदर्शन सुधारने के लिए सहायता करता है। कुंजी को या तो (जैसा कि इस उदाहरण में) मेटा-डेटा के रूप में दिया जा सकता है, या में मुख्य आइटम किसी घटक (यदि यह नक्शा है) के लिए पहला तर्क दिया जा सकता है। अधिक जानकारी के लिए प्रतिक्रिया दस्तावेज़ीकरण देखें।

और गतिशील बच्चों पर react documentation सही दिशा में ले जाना चाहिए। उच्च स्तर पर, यदि आपके पास कुछ कोड है जो किसी प्रकार के लूप में कई समान घटकों को उत्पन्न करता है, तो आपको ^{:key val} के साथ प्रत्येक घटक को उपसर्ग करने की आवश्यकता है। हालांकि, अभिकर्मक को वैक्टरों में चीजों की आवश्यकता होती है, आपको आमतौर पर उपरोक्त उदाहरण में [:ul] जैसे किसी अन्य वेक्टर में लूपिंग निर्माण से आउटपुट को लपेटने की आवश्यकता होती है या एक सामान्य मामले में [:div]।मैं कभी-कभी ऐसा करने के लिए (into [:div] (for ....)) प्रकार का निर्माण करता हूं।

Answer 2

मेरा मानना ​​है कि आप की आपूर्ति करने की जरूरत है जैसे

^{:key (gen-key)} [:polyline ... 

मुझे लगता है कि यह केवल, घटकों के लिए एक नक्शा प्रविष्टि के रूप में जोड़ा जा सकता है जैसा आप यहां कार्य करें:

[trending-app {:key (gen-key) :state-ref paths-ratom :comms ch}] 

तो ऊपर काम करता है, लेकिन जैसे नहीं

[:svg {:key (gen-key)