使用 onSlideChange 方法更新状态时，React Swiper.js 幻灯片不会更改

Question

我设置 swiper.js 使用 ReactJS 来浏览不同的问题。我正在尝试使用 swiper 的 onSlideChange 方法更改 {quesNumber} 状态，该方法应根据当前问题的编号（“q-{quesNumber}”）设置“q”URL 参数。我已经设法做到了，但它卡在第一张幻灯片上，而没有更改到下一张幻灯片。我在控制台上收到此错误：

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:

    



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:

    



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

谢谢 ：）

    
  



  
  
  

    

      

        
        
        
        
      
      
Swiper.js 不支持状态更改或具有状态更改侦听器。您需要重新初始化或重新渲染该组件，使用异步函数，等待结果并显示它们。

        
      
    
  
  
  





  

    

      
 
       

        
 
         
 
归档时间：
 
 
         
 
  6 年 前  
 
 
        
 
        
 
         
 
查看次数：
 
 
         
 
 2197 次  
 
 
        
 
        
 
         
 
最近记录：
 
 
         
 
2 年，6 月 前
 
 
        
 
       
      
 
    
    
    
    

      
相关归档
 
      
      
“ReactNode”不是有效的 JSX 元素 24

      
      
React路由器仅模态路由 21

      
      
在React中改变对子组件的关注的更清洁的方法 14

      
      
React Hook 表单和 Material UI 的 TextField 中的不受控输入到受控输入警告 13

      
      
等待CSS加载，然后再在React [FOUC]中使用JS 11

      
      
为什么使用 redux 而不是会话存储 9

      
      
为什么我的字体很棒的图标一开始显示的很大，然后更新到正确的大小？ 8

      
      
如何使用 i18next 和 react-i18next 处理嵌套和组织翻译键？以及其他最佳实践问题 8

      
      
使用状态设置器作为带有反应钩子的道具 7

      
      
我可以依靠 useState 值来计算新状态吗？ 6

      
    
    
    

      
难疑归档
 
      
      
如何在JavaScript中替换所有出现的字符串 4081

      
      
将现有的,未提交的工作移动到Git中的新分支 2982

      
      
使用Git版本控制查看文件的更改历史记录 2920

      
      
我怎么知道通过jQuery选择了哪个单选按钮？ 2583

      
      
如何在JavaScript中将字符串转换为布尔值？ 2328

      
      
如何在JavaScript中获取当前日期？ 2152

      
      
如何从列表中随机选择一个项目？ 1656

      
      
短路Array.forEach就像调用break 1429

      
      
如何重置MySQL中的AUTO_INCREMENT？ 1174

      
      
我怎样才能用Python代表'Enum'？ 1146

      
    
  

Answer 1

Swiper.js 不支持状态更改或具有状态更改侦听器。您需要重新初始化或重新渲染该组件，使用异步函数，等待结果并显示它们。