gpt4 book ai didi

javascript - 警告 : Each child in an array or iterator should have a unique "key" prop. 检查 'search' 的渲染方法

转载 作者:行者123 更新时间:2023-12-01 01:28:22 24 4
gpt4 key购买 nike

搜索很完美,一切看起来都很好,但收到此警告。
当我按任意键启动搜索方法时,我收到此警告。
“Song_ID”、“Song_Name”和“Image”是来自 SQL 数据库的变量名称。
- 我查看了其他问题,但这对我没有任何帮助。
这是错误所在的代码:

return (
<View>
<ScrollView>
{musicList.map(songObj => {
return (
<View style={styles.resultsContainer}> /// Its written that the erorr in this line
<TouchableOpacity onPress={this.GetListViewItem.bind(this, songObj.Song_Name)}>
<Text style={{ fontSize: 16 }} key={songObj.Song_ID}>
{songObj.Song_Name}</Text>
<Image source={{ uri: songObj.Image }} style={styles.img} />
</TouchableOpacity>
</View>
);
})}
</ScrollView>
</View>
);
}

我不明白该把 key 放在哪里和/或它是什么意思,我尝试了很多次,但进展不顺利。
如果需要更多详细信息,请告诉我,我将插入正确的代码。

最佳答案

您应该将 key 添加到 map 内的最外层组件上。在您的例子中,这是View。试试这个:

return (
<View>
<ScrollView>
{musicList.map(songObj => {
return (
<View style={styles.resultsContainer} key={songObj.Song_ID}>
<TouchableOpacity onPress={this.GetListViewItem.bind(this, songObj.Song_Name)}>
<Text style={{ fontSize: 16 }}>
{songObj.Song_Name}</Text>
<Image source={{ uri: songObj.Image }} style={styles.img} />
</TouchableOpacity>
</View>
);
})}
</ScrollView>
</View>
);
}

添加 key 属性可以让 React 优化渲染,这就是它建议您添加它的原因。阅读 the docs了解更多信息。

关于javascript - 警告 : Each child in an array or iterator should have a unique "key" prop. 检查 'search' 的渲染方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53540365/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com