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

Question

我有一个对象数组，如下所示。 None 个对象具有唯一键。

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

我有一个 FlatList 定义如下：

<FlatList

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

我也试过添加：

 keyExtractor={this._keyExtractor}

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

我做错了什么，我怎样才能使用数组索引作为我的唯一键？

Answer 1

我想出了一个解决方法：

我必须使用我的项目数组并将唯一索引插入 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 后，一切正常。

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}
/>

Answer 3

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

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

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

Answer 4

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

VI 是你想要的任何字符串

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

Using array index on FlatList in React Native

react-native

react-native-flatlist