每个子列表都应该有一个唯一的"key"道具警告？

Question

当我制作滚动视图列表时，我不断收到警告。每个子列表应该具有唯一的"；键"；道具警告？我正在尝试制作一个可追加的列表，当你点击一个按钮时，它可以添加项目。如果有人能帮忙那就太好了！

export default function Home ()  {
const [people,setPeople] = useState([
{name:'First', key:'1'},
{name:'Second', key:'2'},
{name:'Third', key:'3'},
{name:'Fourth', key:'4'},
{name:'Fifth', key:'5'},
])

return (

<View style={styles.container}>

<ScrollView>
<View style={styles.Square1}>

<View style={{backgroundColor:'#171651', height:340, width:400, borderRadius:10,}}>
<Text style={{color:"white", fontWeight:'bold', marginStart:10, fontSize:30, marginTop:10}}>
Investing
</Text>
<Text style={{color:"white", fontWeight:'bold', marginStart:10, fontSize:30,}}>
$0.00
</Text>
</View>
</View>

<View style={{marginTop:50}}>
<Text style={{color:'white', fontSize:20, marginStart:10}}>
Favorites
</Text>
</View>
<ScrollView>
{people.map(item=> (       
<TouchableOpacity>
<View key={item.key}>
<Text style={styles.item}>{item.name}</Text>
</View>
</TouchableOpacity>
))}
</ScrollView>
</ScrollView>
</View>

);
} ``

Answer 1

如果您正在迭代/循环(例如array.map(并返回组件或JSX，就会发生这种情况。这是因为React希望能够区分JSX。在这种情况下，您有View上的密钥。要解决它，您只需要将key上移到父元素TouchableOpacity

根据React文件，

键帮助React识别哪些项目已更改、添加或删除。应该为数组中的元素提供密钥，以使元素具有稳定的身份：选择键的最佳方法是使用一个字符串，该字符串在其同级项中唯一标识列表项。大多数情况下，您会使用数据中的ID作为密钥：

它们很重要，因为它们有助于React跟踪并区分正在渲染的组件。丹·阿布拉莫夫在这里写了一幅很好的插图。除了阅读我链接的文档外，我还建议查看我刚才提到的Dan Abramov的推文。

Answer 2

将关键道具移到TouchableOpacity中。React希望关键道具在最顶端的元素中。

{people.map(item=> (       
<TouchableOpacity key={item.key}>
<View>
<Text style={styles.item}>{item.name}</Text>
</View>
</TouchableOpacity>
))}