react hooks在swiper5以下中去修改状态失败问题

本文链接：https://blog.csdn.net/YFCookie/article/details/119543577

swiper官方文档提供的原生api是通过new一个swiper实例去调用方法，但是在hooks里面当我想获取到当前的轮播索引的时候却发现不能去存储到我的状态里面，但是我通过改写了一些其他方法发现也不行，应该是swiper new了一个实例之后，不能set其hooks里面的状态，然后我就改写了swiper6的方式去写发现就没有这个问题了是可以修改状态的，代码对比如下：

这是swiper5版本下的

  const initSwiper = useCallback(() => {
    var slide = null;

    new Swiper('.swiper-container', {
      direction: 'vertical',
      followFinger: false,
      speed: 1300,
      mousewheel: true,
      // loop: true,
      //   navigation: {
      //     nextEl: '.swiper-button-next',

      //     prevEl: '.swiper-button-prev',
      //   },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },

      on: {
        init: function (swiper) {
          slide = this.slides.eq(0);
          slide.addClass('ani-slide');
          // setInitSpeed(1300);
        },
        transitionStart: function () {
          for (let i = 0; i < this.slides.length; i++) {
            slide = this.slides.eq(i);
            slide.removeClass('ani-slide');
            // setInitSpeed(1300);
          }
        },
        transitionEnd: function () {
          // slide = this.slides.eq(this.activeIndex);
          // console.log(this.activeIndex);
          if (this.activeIndex >= 1) {
            setInitSpeed((prev) => prev + 800);
            console.log(initSpeed, 'speed');
          }

          slide.addClass('ani-slide');
        },
      },
    });
  }, []);
  useEffect(() => {
    // setTimeout(() => {
    initSwiper();
    // },);
  }, [initSwiper]);

这是swiper6版本下的

<Swiper
        onBeforeDestroy={() => {
          return true;
        }}
        navigation={{
          nextEl: '.btn_next',

          prevEl: '.btn_prev',
        }}
        styleName="slider"
        speed={initSpeed}
        direction="vertical"
        followFinger={false}
        //     pagination: {
        //       el: '.swiper-pagination',
        //       clickable: true,
        //     },
        pagination={{
          el: '.swiper-pagination',
          clickable: true,
        }}
        onSlideChange={(swiper) => {
          if (swiper.realIndex >= 1) {
            setInitSpeed(1300);
          } else {
            setInitSpeed(500);
          }
          console.log(swiper.realIndex);
        }}
        mousewheel={true}
      >
        {initBg.map((item, index) => {
          return (
            <SwiperSlide>
              <div styleName="slide_wraps">
                <img src={item} alt="" />
              </div>
            </SwiperSlide>
          );
        })}
      </Swiper>