Javascript reactJS中使用引导转盘的当前幻灯片数

我正在reactJS中创建一个引导旋转木马（图像库），但我在显示准确的索引号（它显示当前幻灯片的最后一个索引值）时遇到了问题

例如：如果我在从第1-2-3张幻灯片开始的第4张幻灯片上，那么我的幻灯片编号将是3（即索引2），我将单击“上一页”按钮，那么我当前的幻灯片编号将是第3张，但我的索引值将是4（而不是3），或者图像索引将是活动幻灯片的3（而不是2）

var PhotoAlbum= React.createClass({
getInitialState: function(){
        return({
            myIndex : 1
        })
    },


    componentWillReceiveProps: function() {
        var currentIndex = $('div.active').index() + 1;
        console.log(currentIndex)

    this.setState({ myIndex:  currentIndex })
},


   render: function(){

console.log(this.state.myIndex, "index number");
    return(
        <div>

        <div className="modal-body pd_0">
       <h4 className="text-center"><b>{this.state.myIndex}/{Photos.length}</b></h4>
        <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">

<div className="carousel-inner" role="listbox" >
    {
        Photos.map(function(x,i){
             if(i==0){
                return(
                 <div className="item active">
                 <img src={x} className="img-responsive"/>
                 </div>
                )

            }else{
                return(
                 <div className="item">
                 <img src={x} className="img-responsive"/>
                 </div>
                )

            }
        })
    }
    </div>

  <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span className="sr-only">Previous</span>
  </a>
  <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span className="sr-only">Next</span>
  </a>
</div>
      </div>


        </div>
        )
   }
})

var PhotoAlbum=React.createClass({
getInitialState:函数（）{
返回({
我的索引：1
})
},
componentWillReceiveProps:function（）{
var currentIndex=$（'div.active'）.index（）+1；
console.log（currentIndex）
this.setState（{myIndex:currentIndex}）
},
render:function（）{
log（this.state.myIndex，“索引号”）；
返回(
{this.state.myIndex}/{Photos.length}
{
照片。地图（功能（x，i）{
如果（i==0）{
返回(
)
}否则{
返回(
)
}
})
}
)
}
})

在给定的示例中，我在componentDidMount中尝试了相同的方法，但是

这个.setState

不是一个函数。 请在此帮助我获取正确的幻灯片编号，并在我的浏览器上更新。

---

感谢您提供的代码，我根据您的需要创建了您的模式。请检查给定的样本：

var PhotoAlbumModal= React.createClass({
   getInitialState: function(){
        return ({
          myPhotoAlbum: this.props.photoAlbum,
          myIndex: 1
        })
    },
     componentWillReceiveProps: function(newProps) {
    this.setState({ myPhotoAlbum:  newProps.photoAlbum })
    },

    componentDidMount: function() {
        this.albumController();
    },

    albumController: function(){
              $('.carousel').carousel({ })
              .on('slid.bs.carousel', function () {

                  var curSlide = $('div.item.active');
                   myIndexValue= curSlide.index()+1;
                   this.setState({ myIndex: myIndexValue })
              }.bind(this));

    },

    render: function(){

            var itemClass;
            var myAlbum = Object.keys(this.state.myPhotoAlbum).map(function(x,i){
                var image=x

                if(i == 0){
                  itemClass="item active";
                  }
                  else{
                       itemClass="item";
                    }
                return(
                    <div className={itemClass} key={i}>
                        <img src={image} className="img-responsive"/>
                    </div>
                )

          },this)


    return(
        <div>
          <div className="modal-body pd_0">
              <h4 className="text-center photo_album_count">{this.state.myIndex}/
              {this.state.myPhotoAlbum.length}</h4>

                  <div id="carousel-example-generic" className="carousel slide" data-interval="false">
                      <div className="carousel-inner center-album" role="listbox">
                          {myAlbum}
                      </div>

                       {this.state.myPhotoAlbum.length>1 ?
                      <div>
                          <a className="left carousel-control control-album" href="#carousel-example-generic" 
                        role="button" data-slide="prev" >
                            <div className="arrow-control">
                              <span className="album-prev" aria-hidden="true"></span>
                              <span className="sr-only">Previous</span>
                            </div>
                          </a>


                          <a className="right carousel-control control-album" href="#carousel-example-generic" 
                              role="button" data-slide="next" >
                              <div className="arrow-control">
                                <span className="album-next" aria-hidden="true"></span>
                                <span className="sr-only">Next</span>
                              </div>
                          </a>
                      </div>
                      :null}


                  </div>

          </div>
      </div>
        )
   }
});

var PhotoAlbumModal=React.createClass({
getInitialState:函数（）{
返回({
myPhotoAlbum:this.props.photoAlbum，
我的索引：1
})
},
组件将接收道具：函数（新道具）{
this.setState（{myPhotoAlbum:newProps.photoAlbum}）
},
componentDidMount:function（）{
此.albumController（）；
},
控制器：函数（）{
$（'.carousel'）.carousel（{}）
.on（'slided.bs.carousel'，函数（）{
var curSlide=$（'div.item.active'）；
myIndexValue=curSlide.index（）+1；
this.setState（{myIndex:myIndexValue}）
}.约束（这个）；
},
render:function（）{
var项目类；
var myAlbum=Object.keys（this.state.myPhotoAlbum）.map（函数（x，i）{
var image=x
如果（i==0）{
itemClass=“项目活动”；
}
否则{
itemClass=“item”；
}
返回(
)
}，本页）
返回(
{this.state.myIndex}/
{this.state.myPhotoAlbum.length}
{myAlbum}
{this.state.myPhotoAlbum.length>1？
：null}
)
}
});

**给定代码的好处：**如果总图像数为1，则不会有左右控制，否则会有

albumcontroller

功能正在运行

didmount