VirtualizedList：缺少项目的键 - React Native

Question

在我的componentDidMount() 上，我进行了一个查询，我从 MongoDb 数据库中收到了一些我想在FlatList 中显示的文档。当我收到查询的结果时，我使用函数mapToList() 将它们映射到我的state.list。我在这里使用的list.id 是由MongoDb 本身生成的插入文档_id。只是有一个id 在这里工作。然后我将key={item.id} 添加到我的renderItem({item}) 方法中，但我仍然收到错误，我必须将密钥添加到我的VirtualizedList 或使用KeyExtractor。

我正在尝试使用Swipeout 从FlatList 中删除一个项目，但首先我必须让这个id 工作。

export default class MyFlatList extends React.Component{
 state={   
 loading: false,
 list: [{
   name: '',
   subtitle: '',
   rightSubtitle: '',
   rightTitle: '',
   id: undefined
 }]
};

mapToList();

mapToList(result)
{ 
  const list = [];
  for(var i = 0; i<result.length; i++)
  {
      list[i] =  {name: result[i].name,
      subtitle : result[i].projectname,
      rightTitle : result[i].work,
      rightSubtitle : result[i].date,
      id: result[i]._id
    };
  }
  this.setState({list});
}

渲染（）

  render(){
  return(
    <View>
    <FlatList
      data={this.state.list}
      renderItem={this.renderItem}
      />
      <ActivityIndicator animating={this.state.loading} color="black" size="large"/>
    </View>
        )
  }

renderItem({item})

renderItem = ({item}) => (
  <Swipeout right={swipeoutBtns}>
  <ListItem
    title={item.name}
    key={item.id}
    titleStyle={styles.titleText}
    subtitleStyle={styles.subtitleText}
    rightTitleStyle={styles.rightSubtitleText}
    rightSubtitleStyle={styles.rightSubtitleText}
    rightIcon={
      <Icon name="keyboard-arrow-right"
          size={17}
          color="black"
        />}
    subtitle={item.subtitle}
    rightTitle={item.rightTitle}
    rightSubtitle={item.rightSubtitle}
    leftAvatar={{rounded:false, title:'PS'}}
  />
  </Swipeout>
)

Answer 1

您需要keyExtractor 参数。默认情况下，它会检查该项目是否具有 key 属性，而这并不是您收到此警告的原因。

用于在指定索引处为给定项目提取唯一键。 Key 用于缓存和作为响应键来跟踪项目重新排序。默认提取器检查 item.key，然后像 React 一样回退到使用索引。

这样做：

 _keyExtractor = (item, index) => item.id.toString();

<FlatList
   data={this.state.list}
   renderItem={this.renderItem}
   keyExtractor={this._keyExtractor}
 />