Основний код FlatList кидає попередження - React Native

Здається, FlatList не працює. Я отримую це попередження.

VirtualizedList: відсутні ключі для елементів, обов’язково вкажіть властивість ключа для кожного елемента або вкажіть спеціальний ключExtractor.

Код:

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

Просто зробіть це:

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

Джерело: тут

Не потрібно використовувати keyExtractor. Документи React Native дещо незрозумілі, але 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!

І точно не кладіть випадкову рядок як ключ.

Це працювало для мене:

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

Можна використовувати

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

ПРИМІТКА: Використовуючи index.toString (), тобто очікуваний рядок.

Майте "id" у своїх даних

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

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

Сподіваюся, це допомагає !!!

Просте рішення - просто дати кожному запису унікальний ключ перед рендерінгом FlatList, оскільки саме для цього VirtualizedListслід відстежувати кожен запис.

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

Попередження виконує поради, які роблять це спочатку, або надає спеціальний інструмент витяжки ключів

цей код працює для мене:

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

Це не дало жодного попередження (перетворення індексу в рядок):

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

у випадку, якщо ваші Дані не є об’єктом: [насправді він використовує кожен індекс елемента (у масиві) як ключ]

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

Спробував Рей, але потім отримав попередження, що "ключ повинен бути рядок". Наступна модифікована версія добре працює для придушення оригіналу та попередження цього рядкового ключа, якщо у вас немає хорошого унікального ключа на самому елементі:

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

Звичайно, якщо у вас є очевидний і хороший унікальний ключ на самому предметі, ви можете просто ним скористатися.

Обов’язково напишіть заяву про повернення, інакше нічого не повернеться. Зі мною.

Це працювало для мене:

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

Перетворення keyExtractorв, stringале замість індексу використовуйте випадкове генероване число.

Коли я використовував keyExtractor={(item, index) => index.toString()}, це ніколи не спрацьовувало і все одно виводило попередження. Але, можливо, це працює для когось?