將鍵添加到Array.map

Question

我正在努力了解如何解決警告：

key不是道具。 嘗試訪問它會導致返回undefined 。 如果需要在子組件中訪問相同的值，則應將其作為其他屬性傳遞。

我在地圖函數中添加了“ i”，並將其作為“鍵”傳遞給我的孩子。

我不確定“將其作為其他道具傳遞”是什么意思。 我究竟做錯了什么？

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

在AccountCard組件中，我這樣訪問密鑰/ ID：

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

Answer 1

不要訪問this.props.key 。 關鍵是React本身。 如果您需要鍵的值“將其作為其他屬性傳遞” 。 例如：

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

Key用於React， myKey用於您使用this.props.myKey進行訪問。 有關示例，請參閱文檔 。

Answer 2

我認為問題不在此片段中（盡管不建議將index作為鍵，而將account.id作為鍵），而是在AccountCard組件聲明中。 我認為您正在嘗試執行諸如props.key類的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}>

Answer 3

雖然其他答案是正確的，但我想添加一個替代解決方案。

您可以通過將div包裹在每個AccountCard上來直接提供密鑰，而不是通過任意道具傳遞密鑰。 像這樣：

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

---

或 ，如果您使用的是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>
  )
})

使用片段不會向DOM中添加任何不必要的元素（就像第一個示例中的div一樣）。 如果願意，還可以使用<>和</>速記語法。