我完全困惑了,因为我的控制台出错了,我阅读了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)}
the ul
还需要一个key
prop:
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
and item
有一个唯一的标识符,最好使用它。
因此,看起来您在提供的示例数据之外还有另一个数组:
[
{ "kind": "books#volumes",
"totalItems": 288,
"items": [
{
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)