Reactjs：如何添加带有旋转图片库的下一个/上一个按钮

Question

我正在创建一个图片库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>    )  }}

Answer 1

我已经通过使用解决了这个问题owlcarousel。

请查看更多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>

    )

  }

Answer 2

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

像这样：

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

对你的两种方法都这样做。