React-Native：配列内の各子は、キーを含めても一意のキーを持つべきです

Question

React-Nativeを開始しましたが、mapの配列を扱う際に問題が発生しました。すべての要素に一意のキーが必要です。 レンダリングメソッドでキーを指定しましたが、まだ警告が表示されています。ここ はコード

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のレンダリング呼び出しにあります。あなたが指定したコードは問題ありません。