React Native - используйте ключевой инструмент с FlatList

Я получаю:

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

довольно запутанный..., массив, который я передаю, имеет свойство ключа, определенное в каждом объекте в массиве. У меня есть этот массив, определенный в this.state. Я проверил быструю распечатку в консоли, чтобы убедиться: распечатать из массива

Каждый объект в массиве определяется как:

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

(doc и данные из другой части моего приложения, но я знаю, что doc.id уникален)

После некоторого googling я попытался определить Key Extractor следующим образом:

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

а затем вот определение моего плоского списка:

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

Все еще получая ту же ошибку, на данный момент не совсем уверен, как справиться с этим или что он делает неправильно. Есть идеи? Спасибо!

Ответы

Ответ 1

"VirtualizedList: отсутствующие ключи для элементов, не забудьте указать свойство ключа на элементе или предоставить собственный ключExtractor"

Это предупреждение о том, что в элементах списка отсутствуют ключи. Эти уникальные ключи - это то, что позволяет 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)}
/>

Ответ 2

я делаю это и работаю для меня:

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

Ответ 3

@Sarantis Tofas имеет правильный ответ. Решил это для меня! Две дополнительные заметки, основанные на комментариях:

  1. Если вы используете индекс, убедитесь, что используете index.toString(), или вы получите другое предупреждение (Failed child context type - type number, присвоенный ожидаемой строке CellRenderer).
  2. FlatList будет работать с индексом по умолчанию, если у вас нет ключевых свойств или определяемого keyExtractor, но он все равно выдаст предупреждение.

Ответ 4

Попробуйте использовать listkey вместо keyExtractor, это сработало для меня

Ответ 5

Лучший уникальный ключевой экстрактор для реагировать родной

функция выглядит так:

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