☰

基本的な FlatList コードが警告をスローする - React Native 質問する

tag-icon • tag-icon react-native
基本的な 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()} />

ベストアンサー1

次のようにするだけです:

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

ソース：ここ

おすすめ記事