Базовый код FlatList выдает предупреждение - React Native

FlatList, похоже, не работает. Я получаю это предупреждение.

VirtualizedList: отсутствуют ключи для элементов, обязательно укажите свойство ключа для каждого элемента или предоставьте настраиваемый keyExtractor.

Код:

<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 (), т.е. ожидается, что это строка.

В ваших данных должен быть идентификатор

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}

Конечно, если у вас есть очевидный и хороший уникальный ключ на самом предмете, вы можете просто использовать его.

Обязательно напишите оператор return, иначе он ничего не вернет .. Со мной случилось.

Это сработало для меня:

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

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

Когда я использовал keyExtractor={(item, index) => index.toString()}, он никогда не работал и все равно вылетал предупреждение. Но, может быть, это у кого-то работает?