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 docs немного неясны , но свойство 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}
/>если ваши Данные не являются объектом: [на самом деле они используют каждый индекс элемента (в массиве) в качестве ключа]
data: ['name1','name2'] //declared in constructor
<FlatList
data= {this.state.data}
renderItem={({item}) => <Text>{item}</Text>}
ItemSeparatorComponent={this.renderSeparator}
keyExtractor={(item, index) => index.toString()}
/>
Это не дало никакого предупреждения (преобразование индекса в строку):
<FlatList
data={[{name: 'a'}, {name: 'b'}]}
keyExtractor={(item, index) => index+"" }
renderItem={
(item) => <Text>{item.name}</Text>
}
/>
Попробовал Рэй ответить, но потом получил предупреждение, что "ключ должен быть строкой". Следующая измененная версия хорошо работает для подавления оригинала и предупреждения о строковом ключе, если у вас нет хорошего уникального ключа на самом элементе:
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()}, он никогда не работал и по-прежнему keyExtractor={(item, index) => index.toString()} предупреждение. Но может быть, это работает для кого-то?