VirtualizedList：项目缺少键 - React Native

Question

在我的 componentDidMount() 上，我做了一个查询，我从 MongoDb 数据库接收了一些文档，我想在 FlatList 中显示这些文档。当我收到查询的结果时，我使用函数 mapToList() 将它们映射到我的 state.list 我在这里使用的 list.id 是由 [=36 生成的插入文档 _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 属性而你没有，这就是你收到此警告的原因。

Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.

这样做：

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

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

VirtualizedList：项目缺少键 - React Native

VirtualizedList: missing keys for items - React Native

javascript

react-native

react-native-flatlist

react-native-listview

mapToList();

渲染（）

renderItem({item})