react，结合现有代码引入antd mobile V5.22里的Swiper走马灯组件，浏览器报错`Swiper` needs at least one child

Question

在使用的react版本：

已写的部分代码：

export default class HouseDetail extends Component {
// ...
// 渲染轮播图结构
  renderSwipers() {
    const {
      houseInfo: { houseImg }
    } = this.state

    return houseImg.map(item => (<Swiper.Item>
        <a  key={item} 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}>
              {this.renderSwipers()}
            </Swiper>
          ) : (
            ''
          )}
        </div>
)
// ...
}

目前效果如下，轮播图及其底部几个小原点没有显示出来，且chrome浏览器报错：

请问代码出了什么问题？如何修改？望在现有代码里举例说明

Answer 1

警告是：swiper下面必须有chile。建议你先打印出你遍历的houseImg是否正确