web-dev-qa-db-ja.com

React Native-FlatListでkeyExtractorを使用します

私は取得しています：

"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"

かなり紛らわしい...、私が渡す配列には、配列内の各オブジェクトで定義されたキープロパティがあります。この配列はthis.stateで定義されています。確認のためにコンソールで簡単に印刷しました： print out of array

配列内の各オブジェクトは次のように定義されます：

  var obj = {key: doc.id, value: doc.data()};

（ドキュメントとデータはアプリの別の部分からのものですが、doc.idが一意であることは知っています）

いくつかのグーグルの後、私はキーエクストラクターを次のように定義しようとしました：

_keyExtractor = (item, index) => item.key;

そして、ここに私のフラットリストの定義があります：

  <FlatList
        style={{}}
        data={this.state.FeedDataCollection}
        keyExtractor={this._keyExtractor}
        renderItem={(rowData) =>this.RenderFeedCard(rowData)}
      />

まだ同じエラーが表示されますが、現時点では、これをどのように処理するのか、または何が間違っているのかはわかりません。何か案は？本当にありがとう！

arraysreact-nativereact-native-flatlist
18
jdoej

「VirtualizedList：アイテムのキーがありません。アイテムのキープロパティを指定するか、カスタムkeyExtractorを指定してください」

これは、リストの要素にキーがないことを示す警告です。これらの一意のキーは、VirtualizedList（FlatListが構築されているもの）がアイテムを追跡できるようにするものであり、効率の点で非常に重要です。

idやemailなどの一意のキープロップを選択する必要があります。

keyExtractorは、デフォルトでindexを使用するようにフォールバックします。ただし、警告は表示されたままになります。

例：{key: doc.id, value: doc.data()}として定義されたオブジェクトは、エクストラクターで次のように使用できます。

keyExtractor={(item, index) => item.key}

Flatlistコンポーネントは次のようになります。

<FlatList
  style={{}}
  data={this.state.FeedDataCollection}
  keyExtractor={(item, index) => item.key}
  renderItem={(rowData) =>this.RenderFeedCard(rowData)}
/>
31
Akis Tofas

私はこれをして私のために働いています：

keyExtractor={(item, index) => 'key'+index}
8
amirhosein

@Sarantis Tofasが正解です。私のためにそれを解決しました！コメントに基づく2つの追加のメモ：

  1. インデックスを使用する場合は、必ずindex.toString（）を使用してください。そうしないと、異なる警告が表示されます（失敗した子コンテキストタイプ-CellRendererに指定されたタイプ番号）。
  2. キープロパティまたはkeyExtractorが定義されていない場合、FlatListはデフォルトでインデックスを使用しますが、それでも警告がスローされます。
2
brownmagik352

このエラーの重要性は、配列のオブジェクトを変更または削除し始める時点です。これは、そのキーを提供しない場合にリストが更新されるためです。

React Nativeがキーなしでリストの変更を処理する方法は、画面に表示されているすべてを削除し、データの新しい配列を調べて、それぞれに対して単一の要素をレンダリングすることです。

React Nativeは、データの配列に1つの小さな変更があるだけでリスト全体を再構築することを望みません。理想的には、React Nativeが削除または変更したオブジェクトを具体的に検出し、それに応じて更新するようにしたいのですが、キーを提供しなければそれは起こりません。

Keyプロパティを使用すると、React Nativeがこれらのオブジェクトのリストを追跡し、変更または削除対象を追跡し、特定のキーを持つ特定の要素を削除することができます。

このように、リストを最初から再構築する必要はありません。このキーにより、React Nativeは、データのオブジェクトの定義を画面に表示される要素と結び付けることができます。

React Nativeが画面にレンダリングするオブジェクトのさまざまなリストを追跡できるようにします。また、リストを更新する際のパフォーマンスの最適化です。

0
Daniel

listkeyの代わりにkeyExtractorを使用してみてください。

0
Rotem Shaanan

React Nativeに最適な一意のキーエクストラクター

関数は次のようになります。

  keyExtractor = item => {
    return item.id.toString() + new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };

アイテムフィールドなし：

  keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };
0
testFireAcc Fire