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

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日
  • 展开全部

悬赏问题

  • ¥15 R语言爬虫的时候元素和园代码不一样怎么解决呀
  • ¥15 VS2022多项目启动有问题
  • ¥15 SQL删除添加数据后序号不连续问题。
  • ¥15 首次运行OmniEvent运行报错
  • ¥15 有没有人知道这个问题怎么解决
  • ¥15 comsol电力电缆载流量仿真
  • ¥15 webSocket可以接TCP socket接口吗
  • ¥60 mpi并行出错,CFD++计算
  • ¥15 c#:vsto,powerpoint的外接程序中换主题颜色
  • ¥15 状态机/汽车转向灯/Sateflow