Проблемы с показателями реактивной карусели

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>

У меня есть компонент карусели начальной загрузки из этого примера. Но когда он рендерится, я получаю ошибку:

Обнаружены двое детей с одинаковым ключом, undefinedundefinedundefined, Ключи должны быть уникальными, чтобы компоненты сохраняли свою идентичность при всех обновлениях. Неуникальные ключи могут привести к дублированию и / или пропуску дочерних элементов - поведение не поддерживается и может измениться в будущей версии. в старом (создан CarouselIndicators)

Но "CarouselIndicators" - это уникальные ценности. Может кто-нибудь объяснить мне, где я был не прав?

Answer 1

Это проблема с реактивным ремнем. Массив, который вы передаете, должен быть массивом объектов с полем 'src', например:

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

поскольку <CarouselIndicators /> использует поле 'src' в элементе массива в качестве ключа для своих элементов