基本的な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()} />

単にこれを行う：

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

出典：こちら

使用する必要はありません keyExtractor。リアクトネイティブドキュメントは少し不明であるが、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（）の使用、つまり文字列であることが期待されています。

データに「ID」がある

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

これは警告を出しませんでした（インデックスを文字列に変換します）：

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

あなたのデータがオブジェクトではない場合：[実際にはそれはキーとして（配列内の）各項目インデックスを使用しています]

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

レイの答えを試しましたが、「キーは文字列でなければならない」という警告を受けました。次の変更されたバージョンは、アイテム自体に適切な一意のキーがない場合、元の文字列とこの文字列キーの警告を抑制するのに適しています。

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

もちろん、アイテム自体に明確で優れた一意のキーがある場合は、それを使用できます。

必ずreturnステートメントを記述してください。そうしないと何も返されません。

これは私のために働きました：

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

keyExtractorをa に変換しますstringが、インデックスを使用する代わりに、ランダムに生成された数値を使用します。

私が使用したときkeyExtractor={(item, index) => index.toString()}、それは決して機能せず、警告を発しました。しかし、多分これは誰かのために働きますか？