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传送带的bootstrap传送带组件。但是当它渲染时我得到错误：

遇到两个具有相同密钥的孩子undefinedundefinedundefined。密钥应该是唯一的，以便组件在更新过程中保持其身份。非唯一键可能会导致子代重复和/或被忽略-该行为不受支持，并且可能在将来的版本中更改。在ol中（由CarouselIndicators创建）

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

Answer 1

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

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

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