React-Redux - 获取错误“警告：flattenChildren（...）遇到两个具有相同密钥的孩子

Question

我刚刚开始使用React和Redux。我正在关注Udemy的课程，在课程中编写示例showin并将它们推送到我的GitHub仓库，以便我可以在以后仔细阅读我的进展。

Udemy课程： Modern React with Redux by Stephen Grider

我的github repo我已经克隆了作者的入门套件，然后将我的更改应用到并提交并推送它们@ GettingStartedWithRedux

问题在于我的reducer（它现在只是一个简单的函数......）我已经硬编码了一本包含标题和id的6本书。

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);

正如你所看到的，在列表中我正在迭代书籍列表，我已经提到了一个独特的键。我的chrome上仍然出现以下错误：

我无法弄清楚为什么关键属性会在它之前附加1？

有什么建议吗？

Answer 1

我的电话是不受欢迎的报价：

 <li key='{book.id}'

应该是

<li key={book.id}