React-Redux - 獲取錯誤「警告：flattenChildren（...）遇到兩個使用相同密鑰的孩子

Question

我剛剛開始使用React和Redux，我正在關注Udemy課程，編寫示例showin並推動他們到我的GitHub庫，這樣我可以在以後細讀我的進步

課程Udemy： Modern React with Redux by Stephen Grider

我的GitHub庫，我已經克隆了筆者的入門套件，然後將我的變化，並承諾與推他們@ GettingStartedWithRedux

問題在於我的reducer（它現在只是一個簡單的功能...）我已經硬編碼了6本帶有標題和ID的書籍。

export default function(){ 
return [{title : 'Harry Potter', id : 1}, 
     {title : 'Lord of the Rings', id : 2}, 
     {title : 'Brotherhood', id : 3}, 
     {title : 'Magestic', id : 4}, 
     {title : 'John Carter of Mars', id : 5}, 
     {title : 'Transman of Gor', id : 6}]; 

}

的index.js其作爲映射此減速到rootReducer如下：

import { combineReducers } from 'redux'; 
import BooksReducer from './reducer-books'; 

const rootReducer = combineReducers({ 
    books : BooksReducer 
}); 

export default rootReducer; 

的容器它使用這些減速器是：

import React, {Component} from 'react' 
import {connect} from 'react-redux'; 
import { selectBook } from '../actions/index'; 
import { bindActionCreators } from 'redux'; 

class BookList extends Component { 

    renderList(){ 
     return this.props.books.map(book => { 
      return (
       <li key='{book.id}' className='list-group-item'>{book.title}</li> 
     ); 
    }); 
} 
    render(){ 
     return (
      <ul className="list-group col-sm-4"> 
       {this.renderList()} 
      </ul> 
     ); 
    } 
}; 

function mapStateToProps(state){ 
    return{ 
     books : state.books 
    } 
}; 


export default connect(mapStateToProps)(BookList); 

正如你所看到的，在列表裏，我正在迭代書籍列表，並且我提到了一個獨特的關鍵。我還收到以下錯誤在我的鉻：

我想不通，爲什麼關鍵屬性是越來越1前追加？

有什麼建議嗎？

Answer 1

我的電話是不需要的報價：

<li key='{book.id}' 

應該

<li key={book.id}