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() {&nbsp; &nbsp; const { services, loading} = this.props.resume;&nbsp; &nbsp; var checkImage = services.length === 0 ? [] : services.filter((item) => item.service_name === "Kitchen")&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OwlCarousel className="owl-theme" loop margin={10} nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{checkImage.map((item, i) => (&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="col-xs-12 item" key={item._id} data-id={item._id} >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img className="service-gallery-images" src={item.service_image_url} alt=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </OwlCarousel>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }

Answer 2

问题很可能是您必须在方法中使用 prevState ：像这样：&nbsp;slideNext&nbsp;=&nbsp;()&nbsp;=>&nbsp;this.setState(prevState&nbsp;=>&nbsp;({&nbsp;currentIndex:&nbsp;prevState.currentIndex&nbsp;+&nbsp;1&nbsp;}));对你的两种方法都这样做。