配列またはイテレータ内の各子には、一意の「キー」小文字が必要です。 Can not fixed

Question

私は私のコンソールに間違いがあり、私はreactjsのドキュメントとstackoverflowのヒントをすべて読んだので、私は全く混乱しましたが、何が問題なのか理解できません。 本のタイトルのリスト（{item.volumeInfo.title}）が表示されますが、コンソールにエラーがあります。ここで

は私のコードです：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class BookList extends Component { 
    renderBook(mainData) { 
     return(
      <ul> 
       {mainData.items.map((item, i) => { 
        return <li key={i} item={item}>{item.volumeInfo.title}</li> 
        })} 
      </ul> 
     ) 
    } 

    render(){ 
     return (
      <div className="book-row"> 
       <div className="book-info"> 
        {this.props.book.map(this.renderBook)} 
       </div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps({book}) { 
    return {book}; 
} 

export default connect(mapStateToProps)(BookList); 

それはAPIレスポンスの一部です：

{ "kind": "books#volumes", 
"totalItems": 288, 
"items": [ 
    { 
    "kind": "books#volume", 
    "id": "yXlOAQAAQBAJ", 
    "etag": "CG7f2mQ+7Nk", 
    "selfLink": "https://www.googleapis.com/books/v1/volumes/yXlOAQAAQBAJ", 
    "volumeInfo": { 
    "title": "Nineteenth Century Home Architecture of Iowa City", 
    "subtitle": "A Silver Anniversary Edition" 

私は次のキーを実行しようとしました：

キー= {item.etagを} 、key = {i}、key = {item.volumeInfo.title}

しかし、エラーはstiですここにいます。

助けてください。

ありがとうございました。

Answer 1

あなたはbookの上にマッピングされているので：

{this.props.book.map(this.renderBook)} 

ulもkey小道具を必要とします：

renderBook(mainData, bookIdx) { 
     return(
      <ul key={bookIdx}> 
       {mainData.items.map((item, i) => { 
        return <li key={i} item={item}>{item.volumeInfo.title}</li> 
        })} 
      </ul> 
     ) 
    } 

が多くul兄弟なるとの違いを教えてニーズを反応するためです（ liと同じ）。

ただし、可能であれば、配列のインデックスではないキーを使用する方がよいでしょう。したがって、bookとitemに一意の識別子がある場合は、それを使用することをお勧めします。

あなたが提供されるサンプル・データの外に別の配列を持っているようなので、それが見えます：あなたは2 mapを

[ 
{ "kind": "books#volumes", 
    "totalItems": 288, 
    "items": [ 
    { 

Answer 2

理由を使用しているされており、一つだけでkeyを割り当て、また<ul>にkeyを割り当てますそのため、エラーが発生していますので、試してみてください：

renderBook(mainData, index) { 
    return(
     <ul key={index}> 
      {mainData.items.map((item, i) => { 
       return <li key={i} item={item}>{item.volumeInfo.title}</li> 
      })} 
     </ul> 
    ) 
}