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

Question

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

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

Код:

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

Answer 1

Просто сделайте это:

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

Источник: здесь

Answer 2

Вам не нужно использовать 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!

И определенно не ставьте случайную строку в качестве ключа.

Answer 3

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

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

Answer 4

Ты можешь использовать

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

ПРИМЕЧАНИЕ. Использование index.toString(), т. Е. Ожидается строка.

Answer 5

Имейте "идентификатор" в ваших данных

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

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

Надеюсь это поможет!!!

Answer 6

Это не дало никакого предупреждения (преобразование индекса в строку):

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

Answer 7

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

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

Предупреждение делает совет, делающий это в первую очередь, или предоставляет специальный экстрактор ключей.

Answer 8

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

      <FlatList
  data={items}
    data={[{name: 'a'}, {name: 'b'}]} 
    keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };
/>

Answer 9

Если ваши Данные не являются объектом: [на самом деле они используют каждый индекс элемента (в массиве) в качестве ключа]

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

Answer 10

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

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

Answer 11

Попробовал ответ Рэя, но затем получил предупреждение, что "ключ должен быть строкой". Следующая измененная версия хорошо работает для подавления оригинала и предупреждения о строковом ключе, если у вас нет хорошего уникального ключа для самого элемента:

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

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

Answer 12

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

Answer 13

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

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

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

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