[英]Add a Key to an Array.map
I'm battling to understand how to resolve the warning: 我正在努力了解如何解决警告:
key
is not a prop.key
不是道具。 Trying to access it will result inundefined
being returned.尝试访问它会导致返回
undefined
。 If you need to access the same value within the child component, you should pass it as a different prop.如果需要在子组件中访问相同的值,则应将其作为其他属性传递。
I have added 'i' in my map function, and passing it to my child as 'key'. 我在地图函数中添加了“ i”,并将其作为“键”传递给我的孩子。
I'm not sure what it means by 'pass it as a different prop'. 我不确定“将其作为其他道具传递”是什么意思。 What am I doing wrong?
我究竟做错了什么?
{
this.state.accounts.map(function(account, i){
return (
<AccountCard
key={i}
lastTransactions = {account.lastTransactions}
bank={account.bank}
number={account.number}
id={account.id}
/>
)
})
}
In the AccountCard component, I access the key/id like this: 在AccountCard组件中,我这样访问密钥/ ID:
<div className=" col-lg-4 col-md-6 col-sm-12 col-xs-12" key={this.props.key}>
Don't access this.props.key
. 不要访问
this.props.key
。 Key is for React itself. 关键是React本身。 If you need value of key "pass it as a different prop" .
如果您需要键的值“将其作为其他属性传递” 。 For example:
例如:
<AccountCard
key={i}
myKey={i}
lastTransactions = {account.lastTransactions}
bank={account.bank}
number={account.number}
id={account.id}
/>
Key
is for React, myKey
is for you to access with this.props.myKey
. Key
用于React, myKey
用于您使用this.props.myKey
进行访问。 See the docs for examples. 有关示例,请参阅文档 。
I think the problem is not in this snippet (altough the use of index as key is not recommended, use account.id
as key), but in the AccountCard
component declaration. 我认为问题不在此片段中(尽管不建议将index作为键,而将
account.id
作为键),而是在AccountCard
组件声明中。 I think there you're trying to do something like props.key
. 我认为您正在尝试执行诸如
props.key
类的props.key
。
If you really need that i
in the child component, add another props just for that and use that in the child. 如果您确实需要在子组件中使用
i
,则为此添加另一个道具并在子组件中使用它。
<AccountCard
key={account.id}
i={i}
lastTransactions = {account.lastTransactions}
bank={account.bank}
number={account.number}
id={account.id}
/>
<div className=" col-lg-4 col-md-6 col-sm-12 col-xs-12" key={this.props.i}>
While the other answers are correct, I'd like to add an alternative solution. 虽然其他答案是正确的,但我想添加一个替代解决方案。
Instead of passing the key down via some arbitrary prop, you can provide a key directly by wraping a div
around each AccountCard
. 您可以通过将
div
包裹在每个AccountCard
上来直接提供密钥,而不是通过任意道具传递密钥。 Like so: 像这样:
this.state.accounts.map(function(account, i){
return (
<div key={i}>
<AccountCard
lastTransactions = {account.lastTransactions}
bank={account.bank}
number={account.number}
id={account.id}
/>
</div>
)
})
OR , use fragments if you are using React v16.2 or later: 或 ,如果您使用的是React v16.2或更高版本,请使用片段 :
this.state.accounts.map(function(account, i){
return (
<React.Fragment key={i}>
<AccountCard
lastTransactions = {account.lastTransactions}
bank={account.bank}
number={account.number}
id={account.id}
/>
</React.Fragment>
)
})
Using fragments will not add any unnecessary elements to the DOM (like the div
in the first example). 使用片段不会向DOM中添加任何不必要的元素(就像第一个示例中的
div
一样)。 You can also use the <>
and </>
shorthand syntax if you prefer. 如果愿意,还可以使用
<>
和</>
速记语法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.