英文:
Encountered two children with the same key REACT NATIVE
问题
以下是翻译好的部分：
New in react here. Coding without using div, however is a constant issue the duplicated array and I don't know how to fix it.
return (
<SafeAreaView style={styles.container}>
<Screen>
<FlatList
data={messages}
keyExtractor={(message) => message.id.toString()}
renderItem={({ item }) => (
<ListItem
title={item.title}
subTitle={item.description}
image={item.image}
onPress={() => console.log("Message selected", item)}
renderRightActions={() => (<ListItemDeleteAction onPress={() => handleDelete(item)} />)}
/>
)}
ItemSeparatorComponent={ListItemSeparator}
/>
</Screen>
</SafeAreaView>
)
英文:
New in react here. Coding without using div, however is a constant issue the duplicated array and I don't know how to fix it.
return (
<SafeAreaView style={styles.container}>
<Screen>
<FlatList
data={messages}
keyExtractor={(message) => message.id.toString}
renderItem={({item})=>
<ListItem
title={item.title}
subTitle={item.description}
image={item.image}
onPress={()=> console.log("Message selected", item)}
renderRightActions={() => (<ListItemDeleteAction onPress={()=> handleDelete (item)}/>)}
/>}
ItemSeparatorComponent={ListItemSeparator}/>
</Screen>
</SafeAreaView>
答案1
得分: 1
首先，toString 是一个函数而不是属性，因此它将是与 undefined 一起的，因此所有项都将具有键 undefined，这是错误的原因。
应该是
keyExtractor={(message) => message.id.toString()}
另外，请确保 messages 数组中的每个 message 都具有唯一的 id。
英文:
First of all the toString is a function not a property so it will be with undefined, so all the items will have key with undefined and this is the cause of the error.
It should be
keyExtractor={(message) => message.id.toString()}
Also, make sure that each message in messages array with unique id.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论