如何使用React钩子初始化Swiper

Question

我正在使用React钩子和Swiper(SwiperJS链接(库。但是，初始化时出错了。有人能帮忙吗？我试过这样-

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实例。尝试将刷实例存储在状态中，并只运行一次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的第二个参数，确保效果只运行一次，即在组件安装期间。