React Native-использовать keyExtractor с FlatList

Я получаю: 

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

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

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

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

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

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

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

и вот мое определение flatlist:

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

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

9
arrays react-native react-native-flatlist

3 ответов

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

это предупреждение о том, что в элементах списка отсутствуют ключи. Эти уникальные ключи позволяют VirtualizedList (на котором построен FlatList) отслеживать элементы и действительно важны с точки зрения эффективности.

вам придется выбрать уникальный ключ опору, как id или email.

The 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)}
/>
13

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

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

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

0