1. ホーム
  2. react-native

[解決済み] 基本的なFlatListのコードで警告を投げる - React Native

2022-04-25 18:56:56

質問

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

出典 こちら