时间戳

首页 > 解决方案 > 在运行 react native 应用程序时出现错误：遇到两个具有相同密钥的孩子

reactjs - 在运行 react native 应用程序时出现错误：遇到两个具有相同密钥的孩子

问题描述

我在两个不同的组件中使用相同的代码。我在反应本机代码中遇到错误遇到两个具有相同密钥的孩子，29270. 密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持，并且可能在未来的版本中发生变化。我该如何解决这个错误我不明白错误是什么以及为什么会发生请帮我解决问题


<SafeAreaView style={styles.container}>
                    <FlatList data={this.state.dataSource}
                        renderItem={({item}) => 
                            <TouchableOpacity style={styles.item} onPress= {() =>this.props.navigation.replace('Test', { StudentUid: item1.uniquecode,  AccessToken: this.state.accessToken })} >
                                <Text style={{fontSize:16, fontWeight:'bold'}}>{item.id} {item.firstname} {item.middlename} {item1.lastname}</Text>
                            </TouchableOpacity>
                        }
                    />
                </SafeAreaView>

can  I use like this 

<SafeAreaView style={styles.container}>
                    <FlatList data={this.state.dataSource}
                        renderItem={({item}) => 
                            <TouchableOpacity key={item.id} style={styles.item} onPress= {() =>this.props.navigation.replace('Test', { StudentUid: item1.uniquecode,  AccessToken: this.state.accessToken })} >
                                <Text style={{fontSize:16, fontWeight:'bold'}}>{item.id} {item.firstname} {item.middlename} {item1.lastname}</Text>
                            </TouchableOpacity>
                        }
                    />
                </SafeAreaView> 
Is this write code?

标签： reactjsreact-native

解决方案

你有两个选择：

  1. 为您的孩子提供一把TouchableOpacity钥匙key={item.id}
  2. 像这样创建一个 keyExtractor 函数
    const keyExtractor = (item) => {
      return item.id.toString();
    };

Flatlist并在你的with中定义这个函数keyExtractor={keyExtractor}

推荐阅读