react-multi-carousel 在第一次实施后不工作

Question

我使用

react-multi-carousel

创建了一个旋转木马，它在我第一次实施时按预期工作，但之后它就不起作用了。

代码-

       <Carousel
            responsive={responsive}
            className={styles['all-blogs']}
            autoPlay
            autoPlaySpeed={2000}
            showDots={true}
            rewind={true}
            rewindWithAnimation={true}
         >
            {blogs.map((blog, index) => (
               <div className={styles['single-blog']} key={index}>
                  {/*  eslint-disable-next-line @next/next/no-img-element */}
                  <img
                     className={styles['blog-image']}
                     src={blog.image}
                     alt='Blog image'
                  />
                  <div className={styles['blog-text']}>
                     <h4 className={styles['blog-title']}>{blog.title}</h4>
                     <p className={styles['blog-desc']}>{blog.desc}</p>
                     <a className={styles['blog-link']} href={blog.link}>
                        Learn More <TbArrowNarrowRight />
                     </a>
                  </div>
               </div>
            ))}
            <div
               className={`${styles['single-blog']} ${styles['all-blog-link']}`}
            >
               <a className={styles['all-blogs-link']}>
                  <span>View all blogs</span> <TbArrowNarrowRight />
               </a>
            </div>
         </Carousel>

CSS -

.all-blogs {
      width: 100%;
      margin-top: $marg-xl * 2;
      padding: $marg-main * 1.5 0;

      .single-blog {
         width: 410px;
         height: 567px;
         margin: 0 auto;
         background: $white-custom;
         box-shadow: $box-shadow-blog;
         border-radius: $radius-lg;

         @media screen and (max-width: $bp-xl) {
            width: 80%;
            height: 500px;
         }
         @media screen and (max-width: $bp-sm) {
            width: 100%;
            height: 600px;
         }

         .blog-image {
            height: 50%;
            width: 100%;
            object-fit: cover;
            border-top-right-radius: $radius-lg;
            border-top-left-radius: $radius-lg;
         }
         .blog-text {
            height: 50%;
            width: 100%;
            padding: $marg-main;
            display: flex;
            flex-direction: column;
            gap: $marg-main;
            border-bottom-right-radius: $radius-lg;
            border-bottom-left-radius: $radius-lg;

            .blog-title {
               font-style: normal;
               font-weight: 600;
               font-size: $text-h3;
               line-height: 32px;
               letter-spacing: $spacing-md;
               color: $gray-7;
            }
            .blog-desc {
               font-style: normal;
               font-weight: 400;
               font-size: $text-h4;
               line-height: 28px;
               letter-spacing: $spacing-sm;
               color: $gray-7;
            }
            .blog-link {
               font-style: normal;
               font-weight: 400;
               font-size: $text-h4;
               line-height: 20px;
               color: $gray-8;
               text-decoration: none;
               display: flex;
               align-items: center;
               gap: $marg-xs;

               &:hover {
                  color: $primary-200;
               }
            }
         }
      }
      .all-blog-link {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: $marg-main;
         background: $blue-1;

         .all-blogs-link {
            font-size: $text-h2;
            display: flex;
            flex-direction: row;
            gap: $marg-sm;
            cursor: pointer;
            text-decoration: underline;
            justify-content: center;
            align-items: center;

            &:hover {
               color: $primary-500;
            }
         }
      }

我不明白为什么我会遇到这个问题？帮我解决这个问题。

注意：剪切这些代码并再次粘贴，您会发现它按预期工作，但如果您刷新页面，它就会停止工作，它甚至无法在页面的第一次呈现上工作。

编辑：

完整代码-

import 'react-multi-carousel/lib/styles.css';

import { useEffect, useState } from 'react';
import { TbArrowNarrowRight } from 'react-icons/tb';
import Carousel from 'react-multi-carousel';

import { responsive } from './BlogSection.breakpoints';
import styles from './BlogSection.module.scss';

interface Blog {
   title: string;
   desc: string;
   link: string;
   image: string;
}

function BlogSection() {
   const [blogs, setBlogs] = useState<Blog[]>([]);

   useEffect(() => {
      setBlogs([
         {
            title: 'Taking Your Business to the next level',
            desc: 'Lorem ipsum dolor sit amet, nsctetur adipiscing elit ut aliquam, purus sit amet luctus veenatis, lectus mag...',
            link: '',
            image: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJsb2clMjBpbWFnZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
         },
         {
            title: 'Taking Your Business to the next level',
            desc: 'Lorem ipsum dolor sit amet, nsctetur adipiscing elit ut aliquam, purus sit amet luctus veenatis, lectus mag...',
            link: '',
            image: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJsb2clMjBpbWFnZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
         },
         {
            title: 'Taking Your Business to the next level',
            desc: 'Lorem ipsum dolor sit amet, nsctetur adipiscing elit ut aliquam, purus sit amet luctus veenatis, lectus mag...',
            link: '',
            image: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJsb2clMjBpbWFnZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
         },
         {
            title: 'Taking Your Business to the next level',
            desc: 'Lorem ipsum dolor sit amet, nsctetur adipiscing elit ut aliquam, purus sit amet luctus veenatis, lectus mag...',
            link: '',
            image: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJsb2clMjBpbWFnZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
         },
         {
            title: 'Taking Your Business to the next level',
            desc: 'Lorem ipsum dolor sit amet, nsctetur adipiscing elit ut aliquam, purus sit amet luctus veenatis, lectus mag...',
            link: '',
            image: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJsb2clMjBpbWFnZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
         },
      ]);
   }, []);

   return (
      <div className={styles['blog-section']}>
         <h5 className={styles['blog-section-main-heading']}>Our Blog —</h5>
         <h3 className={styles['blog-section-second-heading']}>
            Learnings on the land and property markets
         </h3>
         <p className={styles['blog-section-info']}>
            Get the most of reduction in your teams operating costs for the
            whole project which is created by our amazing leaders
         </p>

         <Carousel
            responsive={responsive}
            className={styles['all-blogs']}
            autoPlay
            autoPlaySpeed={2000}
            showDots={true}
            rewind={true}
            rewindWithAnimation={true}
         >
            {blogs.map((blog, index) => (
               <div className={styles['single-blog']} key={index}>
                  {/*  eslint-disable-next-line @next/next/no-img-element */}
                  <img
                     className={styles['blog-image']}
                     src={blog.image}
                     alt='Blog image'
                  />
                  <div className={styles['blog-text']}>
                     <h4 className={styles['blog-title']}>{blog.title}</h4>
                     <p className={styles['blog-desc']}>{blog.desc}</p>
                     <a className={styles['blog-link']} href={blog.link}>
                        Learn More <TbArrowNarrowRight />
                     </a>
                  </div>
               </div>
            ))}
            <div
               className={`${styles['single-blog']} ${styles['all-blog-link']}`}
            >
               <a className={styles['all-blogs-link']}>
                  <span>View all blogs</span> <TbArrowNarrowRight />
               </a>
            </div>
            
         </Carousel>
      </div>
   );
}

export default BlogSection;