React Native FlatList出现cellKey类型不匹配警告问题

嘿，这个问题我熟！你看到的那条警告，核心原因很简单：FlatList要求每个列表项的key必须是字符串类型，但你数据源里的key是数字。

咱们来拆解一下：

• 看你contacts.js里的addKeys函数：

  const addKeys = (val, key) => ({key, ...val})
  

  这里的key是数组的索引（纯数字），直接赋值给了每个contact的key字段，而React Native的CellRenderer组件只认字符串类型的key，所以就抛出警告了。

两种修复方式任你选： #

1. 修改数据源的key生成逻辑 #

直接把数字索引转成字符串就行，改addKeys函数：

const addKeys = (val, key) => ({key: key.toString(), ...val})

或者用模板字符串写得更直观：

const addKeys = (val, key) => ({key: `${key}`, ...val})

2. 用FlatList的keyExtractor属性处理 #

不想改数据源的话，直接在FlatList组件上指定keyExtractor，把索引转成字符串：

<FlatList
  renderItem={obj => (this.renderItem(obj))}
  data={contacts}
  keyExtractor={(item, index) => index.toString()}
/>

小科普一下 #

React Native的虚拟化列表（FlatList、SectionList）需要用字符串key来跟踪单元格的状态和复用，数字类型的key会破坏内部的上下文传递机制，所以必须保证key是字符串类型哦。

内容的提问来源于stack exchange，提问作者DCR