Ken428965 2022-11-07 15:39 采纳率: 53.4%
浏览 309
已结题

react,尝试过在houseImg里写入空值、任意字符或图片的链接地址,chrome浏览器能显示到轮播图的多张图片,但仍然提示说`Swiper` needs at least one child

在使用的react版本如下:

img


已写的部分代码:

// ...
function HouseDetail() {
const [houseinfo, setHouseinfo] = useState({
      houseImg: [],
     // ...
      }
  })
// ...
// 渲染轮播图结构
  function renderSwipers() {
    const { houseImg } = houseinfo
    return houseImg.map(item => {
      const val = /^[\s\S]*(.jpg)$/
      if(val.test(item)==false) {
        return
      }
      return (
        <Swiper.Item key={item}>
          <a href="https://www.baidu.com">
            <img src={BASE_URL + item} alt="" />
          </a>
        </Swiper.Item>
      )
    })
  }
// ...
return (
// ...
{/* 轮播图 */}
        <div className={styles.slides}>
          {!isloading ? (
            <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0} loop autoplay infinite autoplayInterval={5000}>
              {renderSwipers()}
            </Swiper>
          ) : (
            ''
          )}
        </div>
// ...
}
// ...

chrome浏览器显示提示:

img


浏览器能显示到轮播图的多张图片
尝试过在houseImg里写入空值、任意字符或图片的链接地址,但问题依旧

请问代码出了什么问题?如何修改才能解决问题?请在现有代码里举例说明,谢谢~

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-11-08 10:15
    关注

    Swiper至少需要一子元素 。 说明 你renderSwipers 返回的是空 。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月12日
  • 已采纳回答 11月10日
  • 修改了问题 11月8日
  • 修改了问题 11月7日
  • 展开全部

悬赏问题

  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方