Reactjs - 数组/迭代器键

Question

我遇到以下错误：

warning.js?0260:45Warning: 数组或迭代器中的每个子元素都应该 有一个独特的“关键”道具。检查Tabs的渲染方法。

  render() {

    const { tabs } = this.props;
    const { active } = this.state;
    return (
      <div>
        <ButtonToolbar>
          {tabs.map(listValue =>
            <Button  onClick={() => this.handleClick(listValue)}>
              {listValue}
            </Button>
          )}
        </ButtonToolbar>

        // Display the chosen tab
        {this.showTab(active)}



      </div>
    );

在这种情况下，我应该在哪里添加 id 属性。我试过了：

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

但它并没有摆脱错误。请指教

Answer 1

您可以为此使用map 的迭代器：

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

参考

• Array.prototype.map()