Locally, when you press the next button or the previous button, you go one by one, but on the actual production site, you go two by one. Local init is [f, f, f], but it appears as [f, f, f, f] on the production server. (A total of 6 images)
If you reload it from a page that contains that component, it will run as normal. If you refresh it, it’s working normally
Below is the corresponding code.
<div class="crs_meal slider_type2">
<div class="img_slider prod2_2 swiper-container">
<div class="swiper-wrapper">
<Swiper
modules={[FreeMode, Navigation, Thumbs]}
thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
spaceBetween={0}
navigation={true}
>
{props.images.map(image => {
return (
<SwiperSlide>
<img src={image.src} key={image.src} className="fit_img"/>
</SwiperSlide>
)
})}
</Swiper>
</div>
</div>
<div class="thumb_slider crs1_1 swiper-container">
<Swiper
onSwiper={setThumbsSwiper}
modules={[FreeMode, Navigation, Thumbs]}
spaceBetween={10}
slidesPerGroup={1}
slidesPerView={4}
freeMode={true}
watchSlidesProgres={true}
>
{props.images.map(image => {
return (
<SwiperSlide className="swiper-slide">
<img src={image.src} key={image.src} className="fit_img"/>
</SwiperSlide>
)
})}
</Swiper>
</div>
</div>
2 seconds after the swiper component was set, I only set the same image to the new variable as I thought it would need to be refreshed. However, since the data is set after 2 seconds, an error occurs because the swiperImages does not have a value before 2 seconds. How should I resolve this?
Below is the corresponding code.
export default function CustomSwiper(props) {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const [swiperImages, setSwiperImages] = useState();
useEffect(() => {
/* Set a timer that runs once after 2 seconds */
const timeoutId = setTimeout(() => {
console.log("Run in 2 seconds");
setData();
}, 2000);
/* Clean up timeout when components are unmounted */
return () => clearTimeout(timeoutId);
}, []); /* Hand over empty arrays and run only when components are mounted */
function setData() {
/* Perform the tasks required for renewal */
const newData = [...props.images];
setSwiperImages(newData);
}
return (
<>
<div class="crs_meal slider_type2">
<div class="img_slider prod2_2 swiper-container">
<div class="swiper-wrapper">
<Swiper
/* onInit={(swiper) => this.setData()} */
modules={[FreeMode, Navigation, Thumbs]}
thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
spaceBetween={0}
navigation={true}
slidesPerGroup={1}
>
{(swiperImages && swiperImages.length > 0 ? swiperImages : props.image).map(image => {
return (
<SwiperSlide>
<img src={image.src} key={image.src} className="fit_img"/>
</SwiperSlide>
)
})}
</Swiper>
</div>
</div>
<div class="thumb_slider crs1_1 swiper-container">
<Swiper
onSwiper={setThumbsSwiper}
modules={[FreeMode, Navigation, Thumbs]}
spaceBetween={10}
slidesPerGroup={1}
slidesPerView={4}
freeMode={true}
watchSlidesProgres={true}
>
{(swiperImages && swiperImages.length > 0 ? swiperImages : props.image).map(image => {
return (
<SwiperSlide className="swiper-slide">
<img src={image.src} key={image.src} className="fit_img"/>
</SwiperSlide>
)
})}
</Swiper>
</div>
</div>
</>
);
}