Podstawowy kod FlatList generuje ostrzeżenie - React Native

Wygląda na to, że FlatList nie działa. Otrzymuję to ostrzeżenie.

VirtualizedList: brak kluczy dla elementów, upewnij się, że określono właściwość klucza dla każdego elementu lub podaj niestandardowy keyExtractor.

Kod:

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

Po prostu zrób to:

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

Źródło: tutaj

Nie musisz używać keyExtractor. Dokumentacja React Native jest trochę niejasna, ale keywłaściwość powinna znajdować się w każdym elemencie datatablicy, a nie w renderowanym komponencie potomnym. Więc raczej niż

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

czego można się spodziewać, wystarczy umieścić keypole w każdym elemencie datatablicy:

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

I zdecydowanie nie umieszczaj losowego ciągu jako klucza.

To zadziałało dla mnie:

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

Możesz użyć

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

UWAGA: Za pomocą index.toString () oczekuje się, że będzie to łańcuch.

Miej „identyfikator” w swoich danych

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

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

Mam nadzieję że to pomoże !!!

Prostym rozwiązaniem jest po prostu nadanie każdemu wpisowi unikatowego klucza przed renderowaniem za pomocą FlatList, ponieważ tego VirtualizedListpotrzebuje element bazowy, aby śledzić każdy wpis.

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

Ostrzeżenie sugeruje zrobienie tego w pierwszej kolejności lub zapewnia niestandardowy ekstraktor kluczy.

ten kod działa dla mnie:

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

To nie dało żadnego ostrzeżenia (przekształcenie indeksu w łańcuch):

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

w przypadku, gdy Twoje dane nie są przedmiotem: [w rzeczywistości używa indeksu każdego elementu (w tablicy) jako klucza]

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

Wypróbowałem odpowiedź Raya, ale otrzymałem ostrzeżenie, że „klucz musi być łańcuchem”. Następująca zmodyfikowana wersja działa dobrze, aby ukryć oryginał i to ostrzeżenie o kluczu ciągu, jeśli nie masz dobrego unikalnego klucza na samym elemencie:

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

Oczywiście, jeśli masz oczywisty i dobry unikalny klucz do samego przedmiotu, możesz go po prostu użyć.

Upewnij się, że napiszesz instrukcję powrotu, w przeciwnym razie nic nie zwróci .. Stało się ze mną.

To zadziałało dla mnie:

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

Zamieniając keyExtractorw a, stringale zamiast używać indeksu, użyj losowo wygenerowanej liczby.

Kiedy użyłem keyExtractor={(item, index) => index.toString()}, to nigdy nie działało i nadal wyrzucałem ostrzeżenie. Ale może to działa na kogoś?