Reactjs-数组/迭代器键

我有以下错误：

警告：数组或迭代器中的每个子级都应该 拥有独一无二的“钥匙”道具。检查

选项卡的渲染方法

render（）{
const{tabs}=this.props；
const{active}=this.state；
返回(
{tabs.map（listValue=>
this.handleClick（listValue）}>
{listValue}
)}
//显示所选选项卡
{this.showTab（活动）}
);

在这种情况下，我将在何处添加id属性。我试过：

<ButtonToolbar>
              {tabs.map(listValue =>
                <Button key={listValue.id}  onClick={() => this.handleClick(listValue)}>
                  {listValue}
                </Button>
              )}
            </ButtonToolbar>


{tabs.map（listValue=>
this.handleClick（listValue）}>
{listValue}
)}

但它并没有消除错误。请告知
您可以为此使用
map
的迭代器：

<ButtonToolbar>
  {tabs.map((listValue, key) =>
    <Button              ^--- here
      key={key}   <--- and here.
      onClick={() => this.handleClick(listValue)}
    >
      {listValue}
    </Button>)
  }
</ButtonToolbar>


{tabs.map（（listValue，key）=>
{listValue}
)
}

参考文献


如果您使用console.log（listValue.id），它们是否都是唯一的？您还可以执行
tabs.map（（listValue，index）=>this.handleClick（listValue）}>{listValue}）}
<ButtonToolbar>
  {tabs.map((listValue, key) =>
    <Button              ^--- here
      key={key}   <--- and here.
      onClick={() => this.handleClick(listValue)}
    >
      {listValue}
    </Button>)
  }
</ButtonToolbar>