VirtualizedList：缺少项目的键 - React Native

Question

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

我试图从FlatList使用中删除一个项目，Swipeout但首先我必须让这个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}) => (
  <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}
 />