बेसिक फ्लैटलिस्ट कोड चेतावनी फेंकता है - रिएक्टिव नेटिव

Question

फ़्लैटलिस्ट काम नहीं करता है। मुझे यह चेतावनी मिलती है।

वर्चुअलाइज़्डलिस्ट: आइटम के लिए गुम कुंजी, सुनिश्चित करें कि प्रत्येक आइटम पर एक प्रमुख संपत्ति निर्दिष्ट करें या एक कस्टम keyxtxtor प्रदान करें।

कोड:

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    (item) => <Text key={Math.random().toString()}>{item.name}</Text>
  } 
  key={Math.random().toString()} />

Comments

@ Li357 ... और यदि डेटा अपरिवर्तित है, तो लगातार। रैंडम कीज़ हर डेटा चेंज पर हर आइटम को रेंडर करने का कारण बनेगी, जो बहुत ही अयोग्य होगा।

— जूल्स १

जैसा कि नीचे वर्णित है यह एक स्ट्रिंग होना चाहिए, यहां आधिकारिक रेपो पर एक भ्रम है । मुझे लगता है कि प्रतिक्रिया-मूलक टीम उपयोगकर्ताओं को एक कुंजी के रूप में सूचकांक का उपयोग नहीं करने के लिए बचाना चाहती थी लेकिन यह एक अच्छा समाधान नहीं है। मैं एक कुंजी के रूप में DB आईडी का उपयोग करने में सक्षम होना चाहिए। मुझे इसे स्ट्रिंग में बदलने की ज़रूरत नहीं है।

— पीजा

Answer 1

बस यह करें:

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    ({item}) => <Text>{item.name}</Text>
  } 
  keyExtractor={(item, index) => index.toString()}
/>

स्रोत: यहाँ

Comments

{item.name} काम नहीं किया। लेकिन {item.item.name} ने मेरे लिए काम किया। हो सकता है क्योंकि मैंने रेंडर इटेम में ({आइटम}) के बजाय (आइटम) दिया था। धन्यवाद @ रेमंड

— एडिसन डिसूज़ा

घुंघराले ब्रेसिज़ की वजह से। यदि आप घुंघराले ब्रेसिज़ का उपयोग करने जा रहे हैं, तो आपको रिटर्न स्टेटमेंट जोड़ना होगा।

— रे

यह काम नहीं कर सकता है। कुछ तत्वों को हटाने और जोड़ने के बाद, यह डुप्लिकेट आइटम प्रदर्शित करना शुरू कर दिया। मुझे लगता है कि keyExtractor का उद्देश्य विशिष्ट रूप से एक आइटम है। आदर्श रूप से आपके पास प्रत्येक आइटम के लिए एक अद्वितीय आईडी होनी चाहिए और आईडी को कुंजी के रूप में उपयोग करना चाहिए। उदा। KeyExtractor = {item => item.id}

— JustWonder

@JustWonder - सही; यदि आपकी सूची में आइटम हटाए जाने हैं, तो आप इंडेक्स को कुंजी के रूप में उपयोग नहीं कर सकते हैं, और आपको प्रत्येक आइटम के लिए एक अद्वितीय कुंजी बनाने का एक और तरीका खोजना होगा। मामले के लिए जहां सामान केवल कभी जोड़ा जाता है, यह दृष्टिकोण ठीक है।

— जूल्स

लौटाए गए सूचकांक को एक स्ट्रिंग होना चाहिए:keyExtractor={(item, index) => index.toString()}

— रोडेव

Answer 2

आपको उपयोग करने की आवश्यकता नहीं है keyExtractor। प्रतिक्रिया मूल निवासी डॉक्स एक छोटे से स्पष्ट नहीं कर रहे हैं, लेकिन keyसंपत्ति के प्रत्येक तत्व में जाना चाहिए dataसरणी के बजाय गाया बच्चे घटक में। इसलिए इसके बजाय

<FlatList
  data={[{id: 'a'}, {id: 'b'}]}
  renderItem={({item}) => <View key={item.id} />}
/>
// React will give you a warning about there being no key prop

जो आप की अपेक्षा करेंगे, आपको बस सरणी के keyप्रत्येक तत्व में एक फ़ील्ड डालने की dataआवश्यकता है:

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <View />}
/>
// React is happy!

और निश्चित रूप से कुंजी के रूप में एक यादृच्छिक स्ट्रिंग मत डालो।

Answer 3

यह मेरे लिए काम किया:

<FlatList
  data={[{name: 'a'}, {name: 'b'}]} 
  keyExtractor={(item, index) => index.toString()}
/>

Comments

याkeyExtractor={ ( item, index ) => `${index}` }

— आइवर स्कॉट

Answer 4

आप उपयोग कर सकते हैं

 <FlatList   
  data={[]}  
  keyExtractor={(item, index) => index.toString()} 
 />

नोट: index.toString () का उपयोग करना यानी स्ट्रिंग होने की उम्मीद है।

Answer 5

अपने डेटा में एक 'आईडी' रखें

const data = [
{
  name: 'a',
  id: 1
},
{
  name: 'b',
  id: 2
}];

<FlatList 
  data={data}
  renderItem={
    (item) => <Text>{item.name}</Text>
  } 
  keyExtractor={item => item.id}
/>

उम्मीद है की यह मदद करेगा !!!

Answer 6

एक सरल समाधान यह है कि प्रत्येक प्रविष्टि को प्रस्तुत करने से पहले केवल प्रत्येक प्रविष्टि को एक अद्वितीय कुंजी दें FlatList, क्योंकि अंतर्निहित VirtualizedListप्रत्येक प्रविष्टि को ट्रैक करने की आवश्यकता है।

 users.forEach((user, i) => {
    user.key = i + 1;
 });

चेतावनी पहले ऐसा करने की सलाह देती है, या एक कस्टम कुंजी चिमटा प्रदान करती है।

Answer 7

यह कोड मेरे लिए काम करता है:

const content = [
  {
    name: 'Marta',
    content: 'Payday in November: Rp. 987.654.321',
  },]
 
  <FlatList
      data= {content}
      renderItem = { ({ item }) => (
        <View style={{ flexDirection: 'column',             justifyContent: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: '300', color: '#000000' }}>{item.name}</Text>
      <Text style={{ color: '#000000' }}>{item.content}</Text>
        
        />
      )}
      keyExtractor={(item,index) => item.content}
    />

Answer 8

इसने कोई चेतावनी नहीं दी (सूचकांक को स्ट्रिंग में बदलना):

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  keyExtractor={(item, index) => index+"" }
  renderItem={
    (item) => <Text>{item.name}</Text>
  } 
/>

Answer 9

यदि आपका डेटा कोई ऑब्जेक्ट नहीं है: [वास्तव में यह कुंजी के रूप में प्रत्येक आइटम इंडेक्स (एरे में) का उपयोग कर रहा है]

   data: ['name1','name2'] //declared in constructor
     <FlatList
  data= {this.state.data}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={this.renderSeparator}
keyExtractor={(item, index) => index.toString()}
/>

Answer 10

रे के जवाब की कोशिश की लेकिन फिर चेतावनी मिली कि "कुंजी एक स्ट्रिंग होनी चाहिए"। निम्न संशोधित संस्करण मूल और इस स्ट्रिंग कुंजी चेतावनी को दबाने के लिए अच्छी तरह से काम करता है यदि आपके पास आइटम पर एक अच्छी अनूठी कुंजी नहीं है:

keyExtractor={(item, index) => item + index}

बेशक, यदि आपके पास आइटम पर एक स्पष्ट और अच्छी अनूठी कुंजी है, तो आप इसका उपयोग कर सकते हैं।

Answer 11

रिटर्न स्टेटमेंट लिखना सुनिश्चित करें अन्यथा यह कुछ भी नहीं लौटाएगा। मेरे साथ जुड़ा हुआ है।

Answer 12

यह मेरे लिए काम किया:

<FlatList
  data={items}
  renderItem={({ title }) => <Text>{title}</Text> }}
  keyExtractor={() => Math.random().toString(36).substr(2, 9)} />

इंडेक्स का उपयोग करने के बजाय keyExtractorएक को चालू stringकरना एक यादृच्छिक उत्पन्न संख्या का उपयोग करता है।

जब मैंने उपयोग किया keyExtractor={(item, index) => index.toString()}, तो यह कभी काम नहीं किया और अभी भी एक चेतावनी को मार दिया। लेकिन शायद यह किसी के लिए काम करता है?

Comments

कुंजी को अद्वितीय माना जाता है। यादृच्छिक स्ट्रिंग का उपयोग करना एक अच्छा विचार नहीं है। जैसा कि ऊपर उल्लेख किया गया है, यह बिना किसी अन्य परिवर्तन के कारण पुन: रेंडर करने की कोशिश करने पर यादृच्छिक फ़ंक्शन को एक अलग मान देता है क्योंकि यह बिना किसी पुन: रेंडरिंग के कारण होगा।

— एडिसन डिसूजा

मैंने सुना है कि आप के लिए दोस्त धन्यवाद। लेकिन आपको एक और स्ट्रिंग कैसे मिलेगा, अगर आपको 5flatlists

— व्हाइट रैबिट