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

时间:2017-01-09 02:24:24

标签: reactjs redux

我刚刚开始使用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上仍然出现以下错误:

The Error

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

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

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

 <li key='{book.id}'

应该是

<li key={book.id}