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

Question

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

Answer 1

下次做项目时，模拟器中开始出现警告（黄框）。所以keyExtractor确实是必须的，只是warning没有马上出现。

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

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

Answer 2

根据 the React Docs，您需要 "for caching and as the react key to track item re-ordering" 的密钥提取器。您可以通过为每个项目显式定义一个键属性或在 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}
/>

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

My FlatList does not seem to need a keyExtractor -- why?

react-native

react-native-flatlist