警告：数组或迭代器中的每个子代均应具有唯一的“键”道具。 检查“搜索”的渲染方法

Question

搜索是完美的，一切都很好，但是会收到此警告。
当我按任意键启动搜索方法时，会收到此警告。
“ 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> ); } 

我不知道将钥匙放在哪里和/或它是什么意思，我尝试了很多次，但是操作不顺利。
如果需要更多详细信息，请告诉我，我将插入正确的代码。

Answer 1

您应该将键添加到map最外面的组件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道具可以使反应优化渲染，因此建议您添加它。 阅读文档以获取更多信息。