Использование индекса массива на FlatList в React Native

Question

У меня есть массив объектов следующим образом. Ни один из объектов не имеет уникального ключа.

[
   {
       data1: "text1",
       data2: "text2"
   },
   {
       data1: "text3",
       data2: "text4"
   }
]

У меня есть FlatList, определенный следующим образом:

<FlatList

     data={this.state.items}
     renderItem={this.renderItem}
/>

Я также попытался добавить:

 keyExtractor={this._keyExtractor}

но я все еще получаю то же сообщение. Я не уверен, что вышеупомянутый this._keyExtractor должен делать. Это встроенная функция для извлечения индекса или функция, которую я должен создать сам?

Что я делаю неправильно и как я могу просто использовать индекс массива в качестве своего уникального ключа?

Answer 1

Я полагаю, вы скопировали keyExtractor={this._keyExtractor} с ReactNative веб-сайта. Вы забыли скопировать функцию в ваш файл.

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

Или просто скопируйте функцию и вставьте keyExtrator

<FlatList
    data={this.state.items}
    renderItem={this.renderItem}
    keyExtractor={(item, index) => item.id}
/>

Answer 2

keyExtractor уже вычисляет индексы массива для данных, которые вы ему предоставляете.

Поэтому, если вы хотите использовать индексы массива в качестве уникального элемента, вы можете сделать

<FlatList 
      data={this.state.items}
      renderItem={this.renderItem} //... toString() since it accepts string elements
      keyExtractor={(item, index) => index.toString()}
 />

Answer 3

Я нашел обходной путь:

Мне пришлось взять массив items и вставить уникальный индекс в каждый объект в свойстве key следующим образом:

items.forEach((item, i) => {
    item.key = i.toString()
})

После загрузки в состояние я просто использовал свой оригинальный код:

<FlatList
     data={this.state.items}
     renderItem={this.renderItem}
/>

Примечание: мне нужно было использовать toString, в противном случае я получил ошибку Warning : Failed child context type: Invalid child context 'virtualizedCell.cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'. Как только я использовал toString, все работало нормально.