Javascript Reactjs：如何使用旋转图像库添加下一个/上一个按钮

我正在用

AliceCarousel

创建一个图像库。 我在这里遇到的一个错误是在制作

next

或

previous

时总是返回到初始图像。它不会在下一张幻灯片上停止

我在这里所做的错误和帮助或建议。求你了

//代码

class LivingService extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: null,
      responsive: { 1024: { items: 4 } },
      services : this.props.resume,
      ...props,
      ItemsServices:[]
    };
    this.galleryItems = this.galleryItems.bind(this);

  }

  static propTypes = {
    getService: PropTypes.func.isRequired,
    resume: PropTypes.object.isRequired,
    auth: PropTypes.object.isRequired,
    loading: PropTypes.object.isRequired
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if(nextProps.resume !== this.props.resume){
      var services  = this.props.resume.services;
      this.setState({
        ItemsServices: services
      })
    }
  }

  componentDidMount() {
    this.props.getService();  
  }

  onSlideChanged = (e) => this.setState({ currentIndex: e.brand })

  slideNext = () => this.setState(prevState => ({ currentIndex: prevState.currentIndex + 1 }));
  slidePrev = () => this.setState(prevState => ({ currentIndex: prevState.currentIndex - 1 }));

  thumbItem = (brand, i) => <span onClick={() => this.slideTo(brand._id)}>* </span>

  slideTo = (_id) => this.setState({ currentIndex: _id })

  galleryItems = () => {
    return this.state.ItemsServices.map((brand, i) => {
      if(brand.service_name === "Office"){
        return (
          <div className="col-xs-12" key={brand._id} data-id={brand._id} ><img src={brand.service_image_url} /></div>
        )
      }
      
    })
  };

 
  render() {
    const { responsive, currentIndex } = this.state
    const  items = this.galleryItems();

    return(
      <div>
        <Grid className ="col-12 service-living-gallery-grid" >
          <div className="service-gallery-headline">
              Living
          </div>
            
          <AliceCarousel
            dotsDisabled={true}
            buttonsDisabled={true}
            items={items}
            responsive={responsive}
            slideToIndex={currentIndex}
            onSlideChanged={this.onSlideChanged}
            />

            <ul className="gallery-carousel">{this.state.ItemsServices.map(this.thumbItem)}</ul>

            <a className="carousel-control-prev gallery-carousel-arrows-left" role="button" onClick={() => this.slidePrev()}>
                <span aria-hidden="true" className="carousel-control-prev-icon"></span>
                <span className="sr-only">Previous</span>
            </a>
            <a className="carousel-control-next gallery-carousel-arrows-right" role="button" onClick={() => this.slideNext()}>
                <span aria-hidden="true" className="carousel-control-next-icon"></span>
                <span className="sr-only">Next</span>
            </a>

        </Grid>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  resume: state.resume,
  isAuthenticated : state.auth.isAuthenticated,
  auth: state.auth,
  loading: state.apiCallsInProgress > 0
});

export default connect(mapStateToProps, {getService }) (LivingService);

//sliderUI

---

问题很可能是您必须在方法中使用prevState：

像这样：

 slideNext = () => this.setState(prevState => ({ currentIndex: prevState.currentIndex + 1 }));

---

两种方法都要这样做。

我已经用

owlcarousel

解决了这个问题
请查收更多的信息 这里我过滤了数组并返回响应

render() {
    const { services, loading} = this.props.resume;
    var checkImage = services.length === 0 ? [] : services.filter((item) => item.service_name === "Kitchen")
    return(
      <div>

            <OwlCarousel className="owl-theme" loop margin={10} nav>
               {checkImage.map((item, i) => ( 
                <div className="col-xs-12 item" key={item._id} data-id={item._id} >
                  <img className="service-gallery-images" src={item.service_image_url} alt=""/>
                </div>
            ))}
            </OwlCarousel>
      </div>
    )
  }

render（）{
const{services，load}=this.props.resume；
var checkImage=services.length==0？[]：services.filter（（项目）=>item.service\u name==“厨房”）
返回(
{checkImage.map（（项，i）=>）
))}
)
}

Hi@Talmacel谢谢您抽出时间。但我在这里也遇到了同样的错误。有几件事可能是问题所在…例如，为什么要用null初始化currentIndex？像那样在州里散布你的道具？我怀疑这是个好主意。但是，如果没有完整的代码，很难找出实际的问题。我只是尝试通过将其设置为null来解决问题，因为这里的

items=[1,2,3]

因此

slideNext正在使用
currentIndex`+1，默认情况下
currentIndex
设置为
0
。谢谢。。这就是我要找的。
render() {
    const { services, loading} = this.props.resume;
    var checkImage = services.length === 0 ? [] : services.filter((item) => item.service_name === "Kitchen")
    return(
      <div>

            <OwlCarousel className="owl-theme" loop margin={10} nav>
               {checkImage.map((item, i) => ( 
                <div className="col-xs-12 item" key={item._id} data-id={item._id} >
                  <img className="service-gallery-images" src={item.service_image_url} alt=""/>
                </div>
            ))}
            </OwlCarousel>
      </div>
    )
  }