我的平面列表似乎不需要密钥抽取器——为什么?

根据 the React Docs 您需要一个密钥提取器,用于“缓存和作为react密钥跟踪项目重新排序”。可以通过为每个项显式定义键属性或在平面列表上指定keyExtractor属性来实现这一点。如果两者都不做,那么它将默认使用索引并仍然工作(尽管它仍然会抛出警告)。

例如,假设我的名字是“Aaron”、“Betty”、“Charlie”和“Diane”。我可以执行以下任一操作来避免警告:

选项1:每个项目的关键属性

<FlatList
  data={[
      {key: 'Aaron'},
      {key: 'Betty'},
      {key: 'Charlie'},
      {key: 'Diane'}
  ]}
  renderItem={({item}) => <SomeComponent />}
/>

选项2:使用索引提供keyExtractor

<FlatList
  data = [
    {name: 'Aaron'},
    {name: 'Betty'},
    {name: 'Charlie'},
    {name: 'Dave'}
  ]
renderItem={({item}) => <SomeComponent />
keyExtractor={(item, index) => index.toString()}
/>

选项3:使用特定属性提供keyExtractor

<FlatList
  data = [
    {name: 'Aaron'},
    {name: 'Betty'},
    {name: 'Charlie'},
    {name: 'Dave'}
  ]
renderItem={({item}) => <SomeComponent />
keyExtractor={(item, index) => item.name}
/>

下一次我参与该项目时,模拟器中开始出现警告(黄色框)。因此,keyExtractor确实是必要的,只是警告没有立即出现。

这就是我的警告消失的原因。。。

_keyExtractor = (item: { id: Array<any> }) => item.id[0].value;

和项目。。。

_renderItem = ({item}) => (
    <Text key={item.id[0].value} style={styles.item}>
      {item.name[0].value}
    </Text>
  )

在我的渲染函数中。。。

<FlatList style = {styles.flatlist}
    data={this.state.data}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
 />