Temel FlatList kodu Uyarı atıyor - React Native

FlatList çalışmıyor gibi görünüyor. Bu uyarıyı alıyorum.

VirtualizedList: öğeler için eksik anahtarlar, her öğede bir anahtar özelliği belirttiğinizden veya özel bir keyExtractor sağladığınızdan emin olun.

Kod:

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

Basitçe şunu yapın:

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

Kaynak: burada

Kullanmanıza gerek yok keyExtractor. Tepki Yerli dokümanlar biraz belirsiz ama keymülkiyet her elemanda gitmeli datadizisi ziyade işlenen çocuk bileşeninde. Yerine

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

ki beklediğiniz gibi, dizinin keyher bir öğesine bir alan koymanız yeterlidir data:

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

Ve kesinlikle anahtar olarak rastgele bir dizge koymayın.

Bu benim için çalıştı:

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

Kullanabilirsiniz

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

NOT: index.toString () kullanılması yani dizge olması bekleniyor.

Verilerinizde bir 'kimlik' var

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

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

Bu yardımcı olur umarım !!!

Basit bir çözüm, her bir girişi oluşturmadan önce her girişe benzersiz bir anahtar vermektir FlatList, çünkü temelde VirtualizedListher girişi izlemek için gereken şey budur .

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

Uyarı, önce bunu yapmayı tavsiye eder veya özel bir anahtar çıkarıcı sağlar.

bu kod benim için çalışıyor:

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}
    />

Bu herhangi bir uyarı vermedi (dizini bir dizeye dönüştürmek):

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

Verilerinizin bir nesne olmaması durumunda: [aslında her öğe dizinini (dizideki) bir anahtar olarak kullanıyor]

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

Ray'in cevabını denedim ama sonra "anahtarın bir dizge olması gerektiği" uyarısı aldı. Aşağıdaki değiştirilmiş sürüm, öğenin kendisinde iyi bir benzersiz anahtarınız yoksa orijinali ve bu dize anahtar uyarısını bastırmak için iyi çalışır:

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

Elbette, öğenin kendisinde açık ve iyi bir benzersiz anahtarınız varsa, bunu kullanabilirsiniz.

Return ifadesi yazdığınızdan emin olun, aksi takdirde hiçbir şey döndürmez .. Bende oldu.

Bu benim için çalıştı:

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

A'ya keyExtractordönüştürmek stringama indeks kullanmak yerine rastgele oluşturulmuş bir sayı kullanın.

Kullandığımda keyExtractor={(item, index) => index.toString()}, hiç işe yaramadı ve hala bir uyarı attı. Ama belki bu birisi için işe yarar?