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

【问题标题】：React-Redux - Getting error "Warning : flattenChildren(...) Encountered two children with the same keyReact-Redux - 出现错误“警告：flattenChildren（...）遇到两个具有相同密钥的孩子
【发布时间】：2017-05-23 05:58:11
【问题描述】：

我刚刚开始使用 React 和 Redux。我正在关注 Udemy 的一门课程，对课程中显示的示例进行编码并将它们推送到我的 GitHub 存储库，以便我以后可以仔细阅读我的进度。

Udemy 课程： Modern React with Redux by Stephen Grider

我的 github 存储库，在那里我克隆了作者的入门工具包，然后将我的更改应用到并提交并推送它们 @ GettingStartedWithRedux

问题出在我的减速器上（现在它只是一个简单的函数......）我已经硬编码了一个包含 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 将此 reducer 映射到 rootReducer，如下所示：

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

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

export default rootReducer;

使用这些reducer的容器是：

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

如您所见，在列表 li 中，我正在遍历书籍列表，并且我提到了一个唯一的键。我的 chrome 上仍然出现以下错误：

我无法弄清楚为什么 key 属性在它之前附加了 1 ？

有什么建议吗？

【问题讨论】：

去掉引号并改成：key={book.id}
你说得对，它有效！傻我！！谢谢！！！

标签： reactjs redux

【解决方案1】：

我的电话是不需要的报价：

 <li key='{book.id}'

应该是

<li key={book.id}

【讨论】：