[英]Each child in an array or iterator should have a unique "key" prop
[英]Each child in an array or iterator should have a unique “key” prop in reactjs
我完全感到困惑,因为我在控制台中犯了错误,并且阅读了reactjs文档和有关stackoverflow的所有技巧,但是我无法理解是什么问题。 我看到书名列表({item.volumeInfo.title}),但是控制台有错误。
这是我的代码:
import React, { Component } from 'react';
import { connect } from 'react-redux';
class BookList extends Component {
renderBook(mainData) {
return(
<ul>
{mainData.items.map((item, i) => {
return <li key={i} item={item}>{item.volumeInfo.title}</li>
})}
</ul>
)
}
render(){
return (
<div className="book-row">
<div className="book-info">
{this.props.book.map(this.renderBook)}
</div>
</div>
);
}
}
function mapStateToProps({book}) {
return {book};
}
export default connect(mapStateToProps)(BookList);
它是API响应的一部分:
{ "kind": "books#volumes",
"totalItems": 288,
"items": [
{
"kind": "books#volume",
"id": "yXlOAQAAQBAJ",
"etag": "CG7f2mQ+7Nk",
"selfLink": "https://www.googleapis.com/books/v1/volumes/yXlOAQAAQBAJ",
"volumeInfo": {
"title": "Nineteenth Century Home Architecture of Iowa City",
"subtitle": "A Silver Anniversary Edition"
我试图做以下关键:
键= {item.etag},键= {i},键= {item.volumeInfo.title}
但是错误仍然存在。
请帮忙。
非常感谢。
由于您要在book
进行映射:
{this.props.book.map(this.renderBook)}
ul
还需要一个key
道具:
renderBook(mainData, bookIdx) {
return(
<ul key={bookIdx}>
{mainData.items.map((item, i) => {
return <li key={i} item={item}>{item.volumeInfo.title}</li>
})}
</ul>
)
}
这是因为会有很多ul
兄弟姐妹,而React需要说出区别(与li
)。
但是,最好(如果可能)使用非数组索引的键。 因此,如果book
和item
具有唯一的标识符,则最好使用它。
因此,您似乎在提供的示例数据之外还有另一个数组:
[
{ "kind": "books#volumes",
"totalItems": 288,
"items": [
{
原因是您使用了两个map
,并且仅在一个map
分配了key
,也将key
也分配给了<ul>
,因此它给您带来错误,请尝试以下操作:
renderBook(mainData, index) {
return(
<ul key={index}>
{mainData.items.map((item, i) => {
return <li key={i} item={item}>{item.volumeInfo.title}</li>
})}
</ul>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.