Reactjs：如何添加带有旋转图片库的 next/previous 按钮

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>
            
          <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);

//API 响应

[
    {
        "_id": "5f1b0792c4659b079861d946",
        "service_name": "Office",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595606941/ntyo9bgdtuzetlspyt7a.jpg",
        "date": "2020-07-24T16:08:50.587Z",
        "__v": 0
    },
    {
        "_id": "5f1b0783c4659b079861d945",
        "service_name": "Office",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595606926/tylafnrmtrxifognldqc.jpg",
        "date": "2020-07-24T16:08:35.740Z",
        "__v": 0
    },
    {
        "_id": "5f1b0777c4659b079861d944",
        "service_name": "Office",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595606914/w6h1t4acvadsynu4ip63.png",
        "date": "2020-07-24T16:08:23.399Z",
        "__v": 0
    },
    {
        "_id": "5f1b0769c4659b079861d943",
        "service_name": "Office",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595606900/maellafcuecaq3wjyb3o.png",
        "date": "2020-07-24T16:08:09.846Z",
        "__v": 0
    },
    {
        "_id": "5f1971da18ba2b04704d65c2",
        "service_name": "Other",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595503076/nou0knjbtkujxwjktang.png",
        "date": "2020-07-23T11:17:46.928Z",
        "__v": 0
    },
    {
        "_id": "5f1971b218ba2b04704d65c1",
        "service_name": "Bedroom",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595503036/kfiteeilh4doytio6gs8.png",
        "date": "2020-07-23T11:17:06.742Z",
        "__v": 0
    },
    {
        "_id": "5f196d8e3620fa4024f3ea52",
        "service_name": "Office",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595501975/pkwbmn7cftdq8uovf9po.png",
        "date": "2020-07-23T10:59:26.345Z",
        "__v": 0
    },
    {
        "_id": "5f196d4f268e7925fccfa920",
        "service_name": "Living",
        "service_image_url": "https://res.cloudinary.com/tammycloudinary/image/upload/v1595501912/w8hrijdtf0wy97dpwglv.png",
        "date": "2020-07-23T10:58:23.179Z",
        "__v": 0
    }
]

//sliderUI

Answer 1

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

像这样：

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

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

Answer 2

我已经使用 owlcarousel 解决了这个问题。
请查看更多 OwlCarousel 在这里，我过滤了数组和 return 响应。

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>
    )
  }

Reactjs：如何添加带有旋转图片库的 next/previous 按钮

Reactjs: how to add next/previous button with rotating image gallery

javascript

image-gallery

reactjs