KeyExtractorのプロップを使用するときにネイティブのflatlist

反応ネイティブでFlatList component よくデータの長いリストをレンダリングするために動作します.これは、アイテムだけでスクロールリストでは、画面上に一度にすべてのデータ項目が表示されますレンダリングされます.
スクロール可能な項目を一覧表示するFlatList , 必要なものを渡す必要があるdata コンポーネントへのプロップ.The data prop項目の配列を受け入れます.配列の各項目は、リスト内の単一の項目を表します.もう一つの必要なプロップはrenderItem , は、data とリストにそれをレンダリングします.このpropはレンダリングされるJSXを返す関数を受け入れます.
スクロール可能なリストに項目を表示するにはFlatList コンポーネントは、各項目にはid . このキーはFlatList コンポーネントVirtualizedList リストの項目の順序を追跡する.データ配列からのキーをkeyExtractor プロップFlatList コンポーネント.
このポストでは、使用する必要がありますどこで話しましょうkeyExtractor そして、それが必要でないどんなシナリオ.

リストの一覧を表示する

以下のデータ構造を考える.配列には10個の項目があり、それぞれの項目に2つのプロパティがあります.id and title . The id 各項目の一意キーです.

const DATA_WITH_ID = [
  {
    id: 1,
    title: 'quidem molestiae enim'
  },
  {
    id: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    id: 3,
    title: 'omnis laborum odio'
  },
  {
    id: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    id: 5,
    title: 'eaque aut omnis a'
  },
  {
    id: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    id: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    id: 8,
    title: 'qui fuga est a eum'
  },
  {
    id: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    id: 10,
    title: 'distinctio laborum qui'
  }
];

使用FlatList コンポーネントをレンダリングしますtitle 以下の各項目の

export default function App() {
  const renderList = ({ item }) => {
    return (
      <View style={styles.listItem}>
        <Text style={styles.listItemText}>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList data={DATA_WITH_ID} renderItem={renderList} />
    </View>
  );
}

上記のコンポーネントの結果は、エラーまたは警告なしで項目のリストを表示します.加えてFlatList 元のデータ構造が既にキーを含んでいるので、コンポーネントは各項目を識別するユニークなキーを必要としませんid .
上記のスニペットからのデバイスの画面の出力です.

keyExtractorプロップの使用

デフォルトではkeyExtractor propプロパティのチェックkey and id (その順序で).つのいずれかが元のデータ構造に存在するなら、それはFlatList コンポーネント.この場合(前の例のように)明示的にkeyExtractor プロップ
を返します.FlatList コンポーネントは警告をスローします.

ここで、データの配列が各リスト項目を持つユニークなキーを含んでいるシナリオを考えましょうkey nor id . これは、名前のユニークなキープロパティが含まれますuserId .

const DATA_WITH_USER_ID = [
  {
    userId: 1,
    title: 'quidem molestiae enim'
  },
  {
    userId: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    userId: 3,
    title: 'omnis laborum odio'
  },
  {
    userId: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    userId: 5,
    title: 'eaque aut omnis a'
  },
  {
    userId: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    userId: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    userId: 8,
    title: 'qui fuga est a eum'
  },
  {
    userId: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    userId: 10,
    title: 'distinctio laborum qui'
  }
];

リストをレンダリングするときは、この場合に警告が表示されますFlatList コンポーネントは認識しませんuserId としてkey or id 元のデータ構造体の名前.
などのカスタムキー名userId 上の例ではkeyExtractor propを用いる.一意のキー名とその値を取り出し、FlatList コンポーネントは、その値に基づいて項目を追跡します.
上記の配列のデータに対してFlatList コンポーネントと使用keyExtractor propキーを取り出す

<FlatList
  data={DATA_WITH_ID}
  renderItem={renderList}
  keyExtractor={item => item.userId}
/>

警告は、この手順の後にも消えます.

結論

を使用する場合FlatList データ配列が一意である場合、コンポーネントid またはkey プロパティを使用する必要はありませんkeyExtractor 明示的にprop.ただし、カスタムID名はkeyExtractor prop独自のキーを抽出するコンポーネントを明示的に指示します.
あなたが反応ネイティブの詳細については、チェックアウトReact Native category and Expo category 私のブログのページ.また、私の購読することができますnewsletter または私は新しい記事やチュートリアルを発行するたびに更新を取得するに従ってください.