我的 FlatList 似乎不需要 keyExtractor——为什么？答案

【问题标题】：My FlatList does not seem to need a keyExtractor -- why?我的 FlatList 似乎不需要 keyExtractor——为什么？
【发布时间】：2018-03-28 20:19:39
【问题描述】：

我的 FlatList 似乎不需要任何 keyExtractor。如果我不提供任何 keyExtractor，它就可以工作。如果我提供一个带有垃圾代码的 keyExtractor，它也可以工作。

如果我没有看到任何错误，这是否意味着放弃 keyExtractor 是安全的？我什么时候需要？

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

然后在我的 render() 中，除其他外，我有...

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

【问题讨论】：

只是为了澄清，当你说你“看不到错误”时，这是否意味着你也看不到任何警告？如果我没记错的话，不定义keyExtractor 将默认使用index 作为键。这也可能是因为您的 data 可能有一个 key 属性，如果定义了该属性，它将自动使用。考虑编辑您在data 中的数据并将其添加到问题中。
迈克尔，我没有看到任何警告。但是，当我下次从事该项目时，警告确实出现了。不知道为什么延迟。有关更多信息，请参阅我的答案。谢谢

标签： react-native react-native-flatlist

【解决方案1】：

根据the React Docs，您需要一个密钥提取器来“用于缓存并作为跟踪项目重新排序的反应密钥”。您可以通过为每个项目显式定义一个 key 属性或在 FlatList 上指定一个 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}
/>

【讨论】：

【解决方案2】：

下次我在做这个项目时，模拟器中开始出现警告（黄色框）。所以 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}
 />

【讨论】：