React-Native : 배열에있는 각 자식은 키를 포함 할 때도 고유 한 키를 가져야합니다.

Question

방금 ​​을 시작했고 배열의 map을 처리하는 동안 문제가 발생했습니다. 모든 요소에 대해 고유 한 키가 필요하기 때문에. render 메서드에서 키를 지정했지만 여전히 경고 메시지가 표시됩니다. 다음은 코드

import React, { Component } from 'react'; 
import {Text , ScrollView} from 'react-native'; 
import axios from 'axios'; 
import AlbumDetail from './AlbumDetail' 
export default class AlbumList extends Component { 
    state = {albums: ['Fetching Data...']}; 
    componentWillMount() { 
    console.log('fetching data'); 
    // Make a request 
    axios.get('http://rallycoding.herokuapp.com/api/music_albums') 
     .then(response => this.setState({albums: response.data})); 
    } 
    renderAlbums() { 
    return this.state.albums.map(album => 
     <AlbumDetail 
     key = {album.title} 
     album = {album} 
     /> 
    ); 
    } 
    render() { 
    return(
     <ScrollView> 
     {this.renderAlbums()} 
     </ScrollView> 
    ); 
    } 
} 

입니다 그리고 여기 심지어 오류의 키

ExceptionsManager.js:73 Warning: Each child in an array or iterator should have a unique "key" prop. 

Check the render method of `AlbumList`. See https://fb. me/react-warning-keys for more information. 
    in AlbumDetail (at AlbumList.js:16) 
    in AlbumList (at index.js:21) 
    in RCTView (at View.js:113) 
    in View (at index.js:19) 
    in FirstApp (at renderApplication.js:35) 
    in RCTView (at View.js:113) 
    in View (at AppContainer.js:102) 
    in RCTView (at View.js:113) 
    in View (at AppContainer.js:122) 
    in AppContainer (at renderApplication.js:34) 

Answer 1

봐를 포함 후에 내가받은 경고입니다. 그 오류는 AlbumList의 렌더 호출에 있다고 말합니다. 지정한 코드가 정상입니다.