Как сбросить response-id-swiper при каждом вызове обработчика событий в React?

Question

Я использую модуль response-id-swiper в реакции на загрузку ползунка, я установил обработчик события onClick для некоторых кнопок с разными атрибутами id, каждый раз, когда пользователь нажимает кнопку, вызывается API с другим идентификаторомсостояние обновляется, и, следовательно, загружается компонент ImageSlider, а некоторые изображения отображаются на слайдере модального режима.Изображения отображаются должным образом, но проблема в том, что при каждом нажатии новой кнопки загружаются новые изображения, но кнопки разбиения на страницы не сбрасываются, а количество кнопок разбиения на страницы устанавливается равным количеству первых изображений вызовов API!Итак, я предполагаю, что swiper не будет сброшен. Я работаю над тем, как сбросить или уничтожить swiper до того, как swiper будет обработан в компоненте, но мне не повезло.

До сих пор я проверил упомянутые страницы, но не смог найти решение! реагировать-id-swiper и реагировать-идентификатор-swiper npm

Это компонент ImageSlider:

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;

Простой прямой ответ приветствуется, спасибо.

Answer 1

Я нашел решение, добавив rebuildOnUpdate: true prop к параметрам, передаваемым Swiper.Полный список реквизитов можно найти здесь Reaction-ID-Swiper оригинальные реквизиты .

Answer 2

Обновление My Solution for Swiper, я использую Redux для загрузки элементов.должен сделать работу за меня.

<Swiper {...params} shouldSwiperUpdate>
{books === null ? (
<List />
) : (
books.map(book => (
<div key={book._id}>
<CardItem book={book} />
              </div>
            ))
          )}
        </Swiper>`

`

Answer 3

Некоторое время назад у меня возникла похожая проблема, проверьте, работает ли мое решение.

Когда реквизиты слайдов обновлены, вам необходимо вручную обновить swiper с помощью метода update. Документация API

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
  componentDidUpdate(prevProps) {
    // when slides changes
    if(this.swiper && prevProps.sliderImages !== this.props.sliderImages) {
      // update swiper internally
      this.swiper.update();
      // go to first slide
      this.swiper.slideTo(0, 0);
    }
  }

    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;