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的bootstrap轮播组件。但是当它呈现时我得到错误：

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

但'CarouselIndicators'项目是独特的价值观。谁能解释一下我错在哪里？

Answer 1

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

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

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

反应带旋转木马指示器的问题

1 个答案: