遇到了两个具有相同键的 React Native 子组件。

huangapple go评论63阅读模式
英文:

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>
)
英文:

enter image description here

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 (    

    &lt;SafeAreaView style={styles.container}&gt;
   &lt;Screen&gt; 
    &lt;FlatList
    data={messages} 
    keyExtractor={(message) =&gt; message.id.toString}
    renderItem={({item})=&gt; 
    &lt;ListItem
    title={item.title}
    subTitle={item.description}
    image={item.image}
    onPress={()=&gt; console.log(&quot;Message selected&quot;, item)}
    renderRightActions={() =&gt; (&lt;ListItemDeleteAction onPress={()=&gt; handleDelete (item)}/&gt;)}
    /&gt;}
    ItemSeparatorComponent={ListItemSeparator}/&gt; 
    &lt;/Screen&gt;
    &lt;/SafeAreaView&gt;

答案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) =&gt; message.id.toString()}

Also, make sure that each message in messages array with unique id.

huangapple
  • 本文由 发表于 2023年2月16日 02:49:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/75464235.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定