如何使用React钩子初始化Swiper？

Question

我正在使用React钩子和Swiper（SwiperJS Link）库。但是，初始化时出错。有人可以帮忙吗？我这样尝试过-

    let mySwiper; 
    useEffect(() => {
    mySwiper = new Swiper('.swiper-container', {
        loop: true,
        slidesPerView: '2',
        centeredSlides: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
})

但是，React给了我这个警告，并且没有正确初始化滑块。警告-

在每次渲染后，从React Hook useEffect内部对'mySwiper'变量的分配将丢失。要随时间保留该值，请将其存储在useRef Hook中，并将可变值保留在'.current'属性中。否则，您可以直接在useEffect内部移动此变量。

最后是我的模板-

<div className="swiper-container">
   <div className="swiper-wrapper">
      {
         places.map((item, index) => (
          <div key={index} className="swiper-slide"
            onTouchStart={() => { onPlaceSelect(index) }}
            onTouchCancel={() => { onPlaceSelect(index) }}>
              <Package
                 className="swiper-slide"
                 key={index}
                 backgroundImage={Background}
                 modelImage={Model}
                 title="Learn  traditionally"
                 price="15"
                 ref={myRef.current[index]} />
          </div>))}
   </div>
</div>

所以，使用React钩子对其进行初始化的正确方法是什么？

Answer 1

您的useEffect将在每个渲染中运行，每次创建新的Swiper实例。尝试将swiper实例存储在状态中，并仅运行一次useEffect。

let [mySwiper, setMySwiper] = useState(null) 
useEffect(() => {
  let mySwiper = new Swiper('.swiper-container', {
     loop: true,
     slidesPerView: '2',
     centeredSlides: true,
     pagination: {
        el: '.swiper-pagination',
        clickable: true,
     },
  });
  setMySwiper(mySwiper) 
}, [])

[[]作为useEffect的第二个参数，请确保效果只运行一次，即在组件安装期间。