React Native出现重复key报错，FlatList加key属性写法是否正确？

错误成因 #

• 你遇到的Encountered two children with the same key报错，核心原因是原有代码未给FlatList的列表项指定唯一标识key，React默认会采用数组索引作为key，当数据源中存在重复id的条目、或者你在两个组件复用这段代码时数据源出现了重复的29270id，就会触发该报错
• 额外注意：你的代码存在未定义变量item1的笔误，renderItem传入的参数是item，但你在onPress和Text组件中多处使用了不存在的item1，后续会触发变量未定义的运行报错

你的修改方案是否正确？ #

给列表项绑定唯一key的思路是对的，可以解决重复key报错，但存在两个可优化和需要修正的问题：

1. 更推荐使用FlatList官方提供的keyExtractor属性来指定key，而非直接在renderItem的子组件上绑定，写法更规范，也适配FlatList的性能优化设计
2. 必须修正代码中item1的笔误，将所有item1替换为item，否则会触发额外报错

推荐修正后的完整代码 #

<SafeAreaView style={styles.container}>
  <FlatList 
    data={this.state.dataSource}
    {/* 官方推荐用keyExtractor指定唯一key，若item.id存在重复可替换为item.uniquecode等唯一字段 */}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({item}) => 
      <TouchableOpacity 
        style={styles.item} 
        onPress={() => this.props.navigation.replace('Test', { 
          StudentUid: item.uniquecode,  
          AccessToken: this.state.accessToken 
        })} 
      >
        <Text style={{fontSize:16, fontWeight:'bold'}}>
          {item.id} {item.firstname} {item.middlename} {item.lastname}
        </Text>
      </TouchableOpacity>
    }
  />
</SafeAreaView>

补充说明 #

• 如果你确认数据源里的item.id存在重复的可能（比如报错提示的29270就是重复id），可以直接把keyExtractor的取值换成你用到的item.uniquecode，保证每个key都是唯一值即可
• 两个组件复用这段代码时，只要各自数据源的对应key字段都是唯一的，就不会再触发重复key报错

内容的提问来源于stack exchange，提问作者Harshada