reactstrap 轮播指示器的问题

Question

<Carousel
  activeIndex={this.state.activeIndex}
  next={this.next}
  slide
  previous={this.previous}
>
  <CarouselIndicators
    items={this.items.map(item => item.id)}
    activeIndex={this.state.activeIndex}
    onClickHandler={this.goToIndex}
  />
  {this.items.map(item => {
    return (
      <CarouselItem
        onExiting={this.onExiting}
        onExited={this.onExited}
        key={item.id}
        src={item.images.big}
        altText={item.name}
      />
    );
  })}
  <CarouselControl
    direction="prev"
    directionText="Назад"
    onClickHandler={this.previous}
  />
  <CarouselControl
    direction="next"
    directionText="Вперёд"
    onClickHandler={this.next}
  />
</Carousel>

我有一个来自此示例 reactstrap carousel 的引导轮播组件。但是当它呈现我得到错误：

遇到两个孩子用同一个钥匙，undefinedundefinedundefined。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持，并且可能在未来的版本中发生变化。 in ol（由 CarouselIndicators 创建）

但“CarouselIndicators”项目是唯一值。谁能解释我哪里错了？

Answer 1

这是一个反应带问题。您传递给的数组必须是其中包含字段 'src' 的对象数组，如下所示：

[{src: 'unique string', ...}]

由于<CarouselIndicators /> 使用数组项中的字段“src”作为其项的键