我完全糊涂了,因为我的控制台有错误,我阅读了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"
我试着做下一个键:
key={item.etag}, key={i}, key={item.volumenfo.title}
但错误仍然存在。
请帮忙。
非常感谢你。
原因是您使用两个map
,并将key
分配到一个,将key
分配到
renderBook(mainData, index) {
return(
<ul key={index}>
{mainData.items.map((item, i) => {
return <li key={i} item={item}>{item.volumeInfo.title}</li>
})}
</ul>
)
}
因为您正在映射book
:
{this.props.book.map(this.renderBook)}
ul
还需要一个键
道具:
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": [
{
我对reatjs非常陌生,我试图将数据发布到url,但收到RequestNotFound 500错误,我使用调试器看到了这一点 警告:数组或迭代器中的每个子级都应该有一个唯一的“键”道具。检查的渲染方法。 请帮我摆脱这一切 我正在从url获取数据,但我无法发布数据 请检查它,并更正我的代码与解释
我收到3条警告: 警告:数组或迭代器中的每个子节点都应该在ModalBody的div(由ModalBody创建)中的表中具有唯一的key prop。 警告:数组或迭代器中的每个孩子都应该有一个唯一的"key"prop. in tr in thead in table 警告:数组或迭代器中的每个子节点都应该有一个唯一的"key"prop. in tr in tbody in table 我有一个函数
我对React JS组件中的关键道具有问题。 我正在得到 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性。检查登录的呈现方法。从应用程序中传递了一个孩子。 控制台日志中的警告。应用程序组件如下: 我的登录组件如下: 我对React还是个新手,我不确定我应该像钥匙一样传递什么,在哪里传递? 使现代化 LoginForm组件: 路由文件: 主页组件
但这是错误的: 我不知道如何插入“钥匙”
我是新手,我正在编写一个包含卡片的应用程序平面列表,但我发现这个错误,这是我的代码 但是我得到警告:列表中的每个孩子都应该有一个独特的“钥匙”道具。有关更多信息,请参见https://fb. me/react-warge-key。%s, 我做错了什么?
我用ReactNative为iOS和android构建了一个应用程序,它具有。使用有效数据源填充listview时,屏幕底部会显示以下警告: 警告:数组或迭代器中的每个子级都应具有唯一的“键”属性。检查