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

Question

我有一个对象数组，其中没有任何对象具有唯一键。

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

我有一个如下定义的FlatList:

<FlatList

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

我也尝试添加了以下内容：

 keyExtractor={this._keyExtractor}

但我仍然得到相同的信息。我不确定上面的this._keyExtractor应该做什么。它是一个内置函数来提取索引还是我应该自己创建一个函数？

我做错了什么，如何只使用数组索引作为我的唯一键？

- kojow7

Answer 1

keyExtractor 已经为您提供的数据计算了数组索引。

因此，如果您想使用数组索引作为唯一元素，则可以执行以下操作：

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

- Pritish Vaidya

Answer 2

我相信你是从ReactNative官网复制的keyExtractor={this._keyExtractor}，但你忘记将该函数也一并复制到你的文件中了。

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

或者你可以复制这个函数并将其粘贴到keyExtrator中。

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

- Alan Yong

Answer 3

我想出了一个解决方法：

我必须取出我的项目数组，并将唯一索引插入到每个对象的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，一切都正常了。

- kojow7

Answer 4

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

VI可以是任何你想要的字符串

- Dhaval bera

---

请问您能否提供更多关于您回答的细节呢？ - MoxxiManagarm