轮播未显示在反应中

Question

M使用带有reactstrap的旋转木马，将单独的成分作为旋转木马成分进行反应，但是这不起作用   引发的错误是关于活动索引的，由于活动索引而没有显示。

  const items=[
 {
 src:"https://www.w3schools.com/bootstrap/chicago.jpg",
 altText:"1",
 caption:"s1"
 },
 {
 src:"https://www.w3schools.com/bootstrap/la.jpg",
  altText:"2",
  caption:"s2"
  },
  {
src:"https://www.w3schools.com/bootstrap/ny.jpg",
altText:"3",
  caption:"s3"
  }
 ];

     export default class  DisplayCarousel extends Component{
constructor(props){
    super(props)
    this.state={activeIndex:0};
    this.next=this.next.bind(this);
    this.previous=this.previous.bind(this);
    this.goToIndex=this.goToIndex.bind(this);
    this.onExiting=this.onExiting.bind(this);
    this.onExited=this.onExited.bind(this);
}
onExited()
{ 
    console.log("jjjjjjjjjjjj");
    this.animating=false;
}
 onExiting()
 { 
    this.animating=true;
    console.log("ddddddddddd");
  }
 goToIndex(newIndex)
  {  
    if(this.animating)return;
        this.setState({activeIndex:newIndex});
    console.log("ooooooo");
   }
   previous()
   {   
    if(this.animating)return;
    const nextIndex=this.state.activeIndex===0?items.length-1:this.state.activeIndex-1;
    this.setState({activeIndex:nextIndex});
    console.log("llllllll");
   }
   next()
    {  
    if(this.animating)return;
    const nextIndex=this.state.activeIndex===items.length-1?0:this.state.activeIndex+1;
    this.setState({activeIndex:nextIndex});
    console.log("ddddddd");
   }
   render(){
    const { activeIndex }=this.state;
    const slides=items.map((item)=>{
        return(
          <CarouselItem onExiting={this.onExiting} onExited={this.onExited} key={item.src}>
              <img src={item.src} alt={item.altText}/>
              <CarouselCaption captionText={item.caption} captionHeader={item.caption}/>
          </CarouselItem>
        );
    });
    return(
        <Carousel activeIndex={this.activeIndex} next={this.next} previous={this.previous}>
          <CarouselIndicators items={items} activeIndex={this.activeIndex} onClickHandler={this.goToIndex}  />
            {slides}
          <CarouselControl direction="prev" directionText="previousSlide" onClickHandler={this.previous}/>
          <CarouselControl direction="next" directionText="nextSlide" onClickHandler={this.next}/> 
        </Carousel>
        )
   }
   }

引发的错误如下，谁能帮助我了解为什么我不理解的activeindex的值未定义

index.js:2178 Warning: Failed prop type: The prop `activeIndex` is marked as required in `CarouselIndicators`, but its value is `undefined`.

  Line 75:  'activeIndex' is assigned a value but never used  no-unused-vars

感谢您的帮助