4
<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。密钥应该是唯一的,以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持,并且可能在未来的版本中发生变化。在 ol(由 CarouselIndicators 创建)

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

4

1 回答 1

5

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

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

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

于 2018-03-22T00:32:11.667 回答