基本扁平代碼引發警告 - 反應原生

FlatList似乎沒有工作。我得到這個警告。基本扁平代碼引發警告 - 反應原生

VirtualizedList：項目丟失鍵，請務必在每個項目上指定關鍵屬性或提供自定義keyExtractor。

代碼：

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

來源

2017-06-14 Edison D' souza

不好使用隨機密鑰，因爲密鑰應該是唯一的。 – Li357

102

只要做到這一點：

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

來源：here

來源

2017-06-14 13:15:45 Raymond

{item.name}沒有工作。但{item.item.name}爲我工作。可能是因爲我在renderItem中給了（item）而不是（{item}）。由於@Raymond –

爲什麼renderItem = { （項目）=> {} item.name}工程和renderItem = { （項目）=> {{} item.name}}不起作用？ –

由於花括號。如果你要使用花括號，你需要添加一個return語句。 – Raymond

使用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!

，絕對不要把一個隨機字符串作爲關鍵。

來源

2017-09-06 12:59:00 Ben

不起作用。 'keyExtractor'確實解決了這個問題。 – user3526468

在這裏可以正常工作 – Julian

一個簡單的解決方案是在給每個條目提供一個唯一的鍵之前使用FlatList，因爲這是底層VirtualizedList需要跟蹤每個條目。

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

該警告確實會首先執行此操作，或者提供自定義密鑰提取器。

來源

2017-10-09 18:33:33 PieOhPah

基本扁平代碼引發警告 - 反應原生

回答

相關問題