React使用Swiper组件警告信息

错误信息如下:

文字:
[antd-mobile: Swiper] Swiper needs at least one child.

图片:

错误代码

 <Swiper
            style={{
              "--border-radius": "8px",
            }}
            slideSize={70}
            trackOffset={15}
            onIndexChange={handleSwiperChange}
            loop
            stuckAtBoundary={false}
          >
            {moviedata.map((item, index) => (
              <Swiper.Item key={index}>
                <div className="content">
                  <img src={IP + item.image} alt={item.name} />
                </div>
              </Swiper.Item>
            ))}
          </Swiper>

问题分析

这个警告信息说明在使用 Swiper 组件时，至少需要一个子元素。Swiper 组件是 antd-mobile 库中的一个轮播组件，用于展示多个滑动项（通常是图片）。

解决方案

你可以在 Swiper 组件的父级容器中添加一个判断条件，确保至少有一个子元素存在。这样，当没有子元素时，警告信息就不会触发。

示例如下:

{moviedata && moviedata.length > 0 && (
          <Swiper
            style={{
              "--border-radius": "8px",
            }}
            slideSize={70}
            trackOffset={15}
            onIndexChange={handleSwiperChange}
            loop
            stuckAtBoundary={false}
          >
            {moviedata.map((item, index) => (
              <Swiper.Item key={index}>
                <div className="content">
                  <img src={IP + item.image} alt={item.name} />
                </div>
              </Swiper.Item>
            ))}
          </Swiper>
        )}