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已经计算了您提供给它的数据的数组索引。

因此，如果您想使用数组索引作为唯一元素，那么您可以

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

Answer 2

我想出了一个解决方法：

我必须获取我的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'。一旦我习惯了串口，一切都运转良好。

Answer 3

我相信您从ReactNative网站复制keyExtractor={this._keyExtractor}。您忘了将该功能复制到您的文件中。

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

或者您只需复制该功能并粘贴到keyExtrator

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

Answer 4

keyExtractor={(item) => 'VI' + item.id}

VI是您想要的任何字符串

在React Native中使用FlatList上的数组索引

4 个答案: