React Swiper. js слайд не изменится при обновлении состояния с помощью метода onSlideChange - PullRequest
Новая
       173

React Swiper. js слайд не изменится при обновлении состояния с помощью метода onSlideChange

3 голосов
/ 06 августа 2020

Я установил swiper. js для навигации по различным вопросам, используя ReactJS. Я пытаюсь изменить состояние {quesNumber} с помощью метода onSlideChange свайпера, который должен установить параметр URL "q" на основе номера текущего вопроса ("q- {quesNumber}"). Мне это удалось, но он застревает на первом слайде и не меняется на следующий. Я получаю эту ошибку на консоли: 

Uncaught TypeError: Cannot read property 'removeClass' of undefined
    at Swiper.updateSlidesClasses (swiper.esm.js:753)
    at Swiper.slideTo (swiper.esm.js:1311)
    at Swiper.slideNext (swiper.esm.js:1383)
    at Swiper.onNextClick (navigation.js:45)
    at HTMLDivElement.handleEvent (dom7.esm.js:517)

 - Here is my code:

    

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    import React, { useContext } from "react";
    import { useHistory } from "react-router-dom";

    // Import Swiper React components
    import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
    import { Swiper, SwiperSlide } from "swiper/react";
    import { Context } from "../Context";

    // Import Swiper styles
    import "swiper/swiper.scss";
    import "swiper/components/navigation/navigation.scss";
    import "swiper/components/pagination/pagination.scss";
    import "swiper/components/scrollbar/scrollbar.scss";

    function Carousel() {
      let { quesNumber, setQuestNumber } = useContext(Context);

      let history = useHistory();

      function nextQuestion() {
        setQuestNumber(quesNumber + 1);
        history.push(`/q-${quesNumber + 1}`);
      }

      SwiperCore.use([Navigation, Pagination, A11y]);

      
      return (
        <Swiper
          loop={false}
          slidesPerView={"auto"}
          navigation
          spaceBetween={0}
          freeMode={true}
          pagination={{ clickable: false }}
          // onSwiper={() => (setQuestNumber(quesNumber ++))}
          onSlideChange={() => nextQuestion()}
          // onClick={() => console.log(nextQuestion())}
        >
          <SwiperSlide>slide 1</SwiperSlide>
          <SwiperSlide>slide 2</SwiperSlide>
          <SwiperSlide>slide 3</SwiperSlide>
          <SwiperSlide>slide 4</SwiperSlide>
        </Swiper>
      );
    }

    export default Carousel;
import React, {useContext} from "react"; импортировать {useHistory} из "дом-маршрутизатора-реакции"; // Импортируем компоненты Swiper React import SwiperCore, {Navigation, Pagination, A11y} из swiper; импортировать {Swiper, SwiperSlide} из "swiper / react"; импортировать {Контекст} из "../Context"; // Импорт стилей Swiper import "swiper / swiper.s css"; импорт "swiper / components / navigation / navigation.s css"; import "swiper / components / pagination / pagination.s css"; import «swiper / components / scrollbar / scrollbar.s css»; function Carousel () {let {quesNumber, setQuestNumber} = useContext (Контекст); let history = useHistory (); функция nextQuestion () {setQuestNumber (quesNumber + 1); history.pu sh (`/ q - $ {quesNumber + 1}`); } SwiperCore.use ([Навигация, разбивка на страницы, A11y]); возвращение ( (setQuestNumber (quesNumber ++))} onSlideChange = {() => nextQuestion ()} // onClick = {() => console.log (nextQuestion ())}> слайд 1 слайд 2 слайд 3 слайд 4 ); } экспортировать карусель по умолчанию;

Спасибо :)

1 Ответ

0 голосов
/ 06 августа 2020

Не уверен, что это связано, но попробуйте изменить функцию nextQuestion на обработчик обратного вызова: 

import React, { useContext, useCallback } from "react";

const nextQuestion = useCallback(() => {
  setQuestNumber(quesNumber + 1);
  history.push(`/q-${quesNumber + 1}`);
}, [setQuestNumber]);

....
onSlideChange={nextQuestion}
....
...