Question

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

key不是道具。尝试访问它将导致undefined 被退回。如果您需要在孩子中访问相同的值组件，你应该把它作为一个不同的道具传递。

我添加了＆＃39; i＆＃39;在我的地图功能中，并将其作为＆＃39;键＆＃39;传递给我的孩子。

我不确定它是什么意思将它作为一个不同的道具传递给它。我做错了什么？

 {   
          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本身。如果您需要键＆＃34的值，请将其作为不同的道具传递＃34; 。例如：

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

Key适用于React，myKey供您this.props.myKey访问。有关示例，请参阅docs。

Answer 2

我认为问题不在此代码段中（尽管不建议使用索引作为键，但使用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}>

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或更高版本，请使用fragments：

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

使用fragments不会向DOM添加任何不必要的元素（如第一个示例中的div）。如果您愿意，也可以使用<>和</>简写语法。

将键添加到Array.map

3 个答案: