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

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

Encountered two children with the same key REACT NATIVE

问题

以下是翻译好的部分：

  1. 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.
  3. return (
  4.     <SafeAreaView style={styles.container}>
  5.         <Screen>
  6.             <FlatList
  7.                 data={messages}
  8.                 keyExtractor={(message) => message.id.toString()}
  9.                 renderItem={({ item }) => (
  10.                     <ListItem
  11.                         title={item.title}
  12.                         subTitle={item.description}
  13.                         image={item.image}
  14.                         onPress={() => console.log("Message selected", item)}
  15.                         renderRightActions={() => (<ListItemDeleteAction onPress={() => handleDelete(item)} />)}
  16.                     />
  17.                 )}
  18.                 ItemSeparatorComponent={ListItemSeparator}
  19.             />
  20.         </Screen>
  21.     </SafeAreaView>
  22. )
英文:

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.

  1. return (    
  3.     &lt;SafeAreaView style={styles.container}&gt;
  4.    &lt;Screen&gt; 
  5.     &lt;FlatList
  6.     data={messages} 
  7.     keyExtractor={(message) =&gt; message.id.toString}
  8.     renderItem={({item})=&gt; 
  9.     &lt;ListItem
  10.     title={item.title}
  11.     subTitle={item.description}
  12.     image={item.image}
  13.     onPress={()=&gt; console.log(&quot;Message selected&quot;, item)}
  14.     renderRightActions={() =&gt; (&lt;ListItemDeleteAction onPress={()=&gt; handleDelete (item)}/&gt;)}
  15.     /&gt;}
  16.     ItemSeparatorComponent={ListItemSeparator}/&gt; 
  17.     &lt;/Screen&gt;
  18.     &lt;/SafeAreaView&gt;

答案1

得分: 1

首先，toString 是一个函数而不是属性，因此它将是与 undefined 一起的，因此所有项都将具有键 undefined，这是错误的原因。

应该是

  1. 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

  1. 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
  • arrays
  • javascript
  • react-native
  • reactjs
匿名

发表评论

匿名网友

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

确定