reactjs - 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 。但是当它渲染时我收到错误:

Encountered two children with the same key, undefinedundefinedundefined. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in ol (created by CarouselIndicators)

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

Answer 1

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

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

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