我刚刚开始使用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?
有什么建议吗?
答案 0 :(得分:0)
我的电话是不受欢迎的报价:
<li key='{book.id}'
应该是
<li key={book.id}