Question

我的FlatList似乎不需要任何keyExtractor。如果我不提供任何keyExtractor它的工作原理。如果我在其中提供带有垃圾代码的keyExtractor，它也可以工作。

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

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

然后在我的渲染（），以及其他事情......

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

Answer 1

根据the React Docs，您需要一个关键提取器，用于缓存和作为跟踪项目重新排序的反应键＆＃34;。您可以通过为每个项显式定义键属性或通过在FlatList上指定keyExtractor prop来完成此操作。如果你不这样做，那么它将默认使用索引并仍然有效（尽管它仍然会发出警告）。

例如，让我们说我有名字＆＃34; Aaron＆＃34;，＆＃34; Betty＆＃34;，＆＃34; Charlie＆＃34;和＆＃34; Diane＆＃ 34 ;.我可以执行以下任何操作以避免警告：

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

＆＃13;

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

＆＃13;

选项2：使用索引

提供keyExtractor

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: