Javascript 向Array.map添加一个键

我正在努力理解如何解决警告：

键

不是道具。试图访问它将导致

未定义

被归还。如果需要在子对象中访问相同的值 组件，则应将其作为其他道具传递

我在map函数中添加了'I'，并将其作为'key'传递给我的孩子

我不确定“将其作为不同的道具传递”是什么意思。我做错了什么

 {   
          this.state.accounts.map(function(account, i){
              return (
                  <AccountCard 
                         key={i}
                         lastTransactions = {account.lastTransactions} 
                         bank={account.bank} 
                         number={account.number} 
                         id={account.id} 
                   />         
             )
       })
    }

{
this.state.accounts.map（函数（account，i）{
返回(
)
})
}

在AccountCard组件中，我访问密钥/id的方式如下：

 <div className=" col-lg-4 col-md-6 col-sm-12 col-xs-12" key={this.props.key}>

---

我认为问题不在这段代码中（尽管不建议使用索引作为键，但使用

account.id

作为键），而是在

AccountCard

组件声明中。我想你正在尝试做一些类似于

props.key

的事情

如果您确实需要在子组件中使用

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}>

---

我认为问题不在这段代码中（尽管不建议使用索引作为键，但使用

account.id

作为键），而是在

AccountCard

组件声明中。我想你正在尝试做一些类似于

props.key

的事情

如果您确实需要在子组件中使用

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}>

---

不要访问

这个.props.key

。关键是反应本身。如果您需要“将其作为其他道具传递”键的值。例如：

<AccountCard 
  key={i}
  myKey={i}
  lastTransactions = {account.lastTransactions} 
  bank={account.bank} 
  number={account.number} 
  id={account.id} 
 />  

---

例如。
不要访问
这个.props.key
。关键是反应本身。如果您需要“将其作为其他道具传递”键的值。例如：

<AccountCard 
  key={i}
  myKey={i}
  lastTransactions = {account.lastTransactions} 
  bank={account.bank} 
  number={account.number} 
  id={account.id} 
 />  

例如。
虽然其他答案都是正确的，但我想添加一个替代解决方案

您可以通过在每个
会计卡
周围包裹
div
来直接提供密钥，而不是通过任意道具向下传递密钥。像这样：

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>
  )
})

this.state.accounts.map（函数（account，i）{
返回(
如果您使用的是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>
  )
})

this.state.accounts.map（函数（account，i）{
返回(
不会向DOM中添加任何不必要的元素（如第一个示例中的
div
）。如果愿意，还可以使用
和
速记语法。
虽然其他答案正确，但我想添加一个替代解决方案

您可以通过在每个
会计卡
周围包裹
div
直接提供密钥，而不是通过任意道具向下传递密钥。如下所示：

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>
  )
})

this.state.accounts.map（函数（account，i）{
返回(
如果您使用的是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>
  )
})

this.state.accounts.map（函数（account，i）{
返回(
不会向DOM添加任何不必要的元素（如第一个示例中的
div
）。如果愿意，您也可以使用
和
速记语法。
是否尝试访问
会计卡
组件中的密钥？只要一个指针，
密钥
就应该是唯一的。只需添加一个数字是不好的。这可能会产生冲突。请尝试
密钥={account.id}
并让我知道发生了什么。我在问题中添加了我如何使用组件中的id。您正在访问
这个.props.key
，它是用于React-itselft的-不要这样做。请参见下面的我的答案。您是否尝试访问
AccountCard
组件中的密钥？只是一个指针，
key
应该是唯一的。只需添加一个number是个坏主意。它可能会产生冲突。请尝试
key={account.id}
并让我知道发生了什么。我在问题中添加了我如何使用组件中的id。您正在访问
这个.props.key
，它是为自己做出反应的-不要这样做。请参见下面的我的答案。我已经添加了我在问题中使用密钥的位置。您可能了解到了一些事情。更新了我的答案谢谢Ursus。我根本不需要“我”。我很好只是希望去掉警告。所以，只要有'key={account.id}'就足够了？我可以去掉id={account.id}和I={I}以及“function（account，I）”中的I。删除警告就足够了，不必在子组件中使用key:）不要使用
this.props.key
来摆脱警告我已经在我使用问题的关键的地方添加了。你可能了解到了什么。更新了我的答案谢谢Ursus。我根本不需要“我”。我只是希望摆脱警告。所以，只要有“key={account.id}”就足够了？我可以摆脱id={account.id}和I={I}以及“function（account，i）”中的i？删除警告就足够了，不要在子组件中使用键：）不要使用
this.props.key
来删除警告