Kode FlatList dasar melempar Peringatan - Bereaksi Asli

FlatList tampaknya tidak berfungsi. Saya mendapat peringatan ini.

VirtualizedList: kunci yang hilang untuk item, pastikan untuk menentukan properti kunci pada setiap item atau berikan kustom keyExtractor.

Kode:

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

Cukup lakukan ini:

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

Sumber: di sini

Anda tidak perlu menggunakan keyExtractor. The React Native docs sedikit tidak jelas tetapi keyproperti harus masuk di setiap elemen dataarray daripada di komponen turunan anak. Jadi, bukannya

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

yang mana yang Anda harapkan, Anda hanya perlu meletakkan keybidang di setiap elemen dataarray:

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

Dan jelas jangan meletakkan string acak sebagai kuncinya.

Ini bekerja untuk saya:

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

Kamu bisa memakai

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

CATATAN: Menggunakan index.toString () yaitu diharapkan menjadi string.

Memiliki 'id' di data Anda

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

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

Semoga ini membantu !!!

Solusi sederhana adalah dengan hanya memberikan setiap entri kunci yang unik sebelum rendering FlatList, karena itulah yang mendasarinya VirtualizedListperlu melacak setiap entri.

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

Peringatan tidak menyarankan melakukan hal ini terlebih dahulu, atau memberikan ekstraktor kunci khusus.

kode ini berfungsi untuk saya:

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

Ini tidak memberikan peringatan apa pun (mengubah indeks menjadi string):

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

jika data Anda bukan objek: [sebenarnya itu menggunakan setiap indeks item (dalam array) sebagai kunci]

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

Mencoba jawaban Ray tetapi kemudian mendapat peringatan bahwa "kuncinya harus berupa string". Versi modifikasi berikut berfungsi dengan baik untuk menekan yang asli dan kunci ini peringatan jika Anda tidak memiliki kunci unik yang baik pada item itu sendiri:

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

Tentu saja jika Anda memiliki kunci unik yang jelas dan bagus pada item itu sendiri, Anda bisa menggunakannya.

Pastikan untuk menulis pernyataan pengembalian jika tidak maka tidak akan menghasilkan apa-apa ..

Ini bekerja untuk saya:

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

Mengubah keyExtractormenjadi stringtetapi bukannya menggunakan indeks menggunakan nomor yang dihasilkan secara acak.

Ketika saya menggunakan keyExtractor={(item, index) => index.toString()}, itu tidak pernah berhasil dan masih mengeluarkan peringatan. Tapi mungkin ini bekerja untuk seseorang?