배열 또는 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다. 수 없습니다

Question

내 콘솔에 실수가 있기 때문에 나는 완전히 혼란스러워하고 stackjflow에 대한 도움말과 반응 팁을 읽었으나 문제가 무엇인지 명확히 알 수는 없다. 책 제목 목록 ({item.volumeInfo.title})이 표시되지만 콘솔에 오류가 있습니다.

{ "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" 

내가 다음 키를하려고 노력 :

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 응답의 일부는 다음과 같습니다

내 코드입니다

키 = {item.etag} , key = {i}, key = {item.volumeInfo.title}

하지만 오류는 sti입니다. 여기있을거야.

도와주세요.

정말 고마워요.

Answer 1

당신은 book을 통해 매핑되어 있기 때문에 :

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

이 ul 형제 많은 수와 차이를 구별 할 필요가 반응하기 때문입니다 (:

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

는 ul도 key 소품을 필요로 li과 동일).

그러나 가능한 경우 배열의 색인이 아닌 키를 사용하는 것이 좋습니다. 따라서 book 및 item에 고유 식별자가있는 경우이를 사용하는 것이 가장 좋습니다. 당신은 당신이 제공되는 샘플 데이터를 외부의 다른 배열을 가지고있는 것처럼

그래서, 보이는 :

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

Answer 2

이유는 두 map를 사용하여, 단 하나의 key을 할당하는되면, key도 <ul>를 할당 그것이 당신에게 오류를주고 있기 때문에 시도해보십시오 :

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