react，chrome浏览器能显示轮播图的多张图片，但仍然提示说Swiper needs at least one child

[ken428965]

已写的部分代码：

function HouseDetail() {
const [houseinfo, setHouseinfo] = useState({
      houseImg: []
      }
  })
  function renderSwipers() {
    const { houseImg } = houseinfo
    console.log(houseImg)
    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>
}

能console出图片数据，能显示多张轮播图，swiper和swiper.item里面已经有子元素，但浏览器就是一直提示说Swiper needs at least one child，请问为什么？

[miracles1919]

代码能格式化一下么 ...

[ken428965]

原来如此~~~渲染的不是 houseImg，所以它是否有值没有意义，加上可能经过test就变成空数组了~~~
看到您分享的修改内容，非常感谢~~~
然而，考虑到我这边需要展示的图片有1000多张，如果在src里写固定图片地址会难以做到，因此把内容改成以下：

const { houseImg } = houseinfo;
    let arr = [];
    houseImg.map((item, index) => {
        let imgs = {
            imgSrc: `${BASE_URL}${item}`,
            id: index + 1
        };
        arr.push(imgs)
    })
    return arr.map(item => {
        return (
            <Swiper.Item key={item.id}>
              <a href="https://www.baidu.com">
                <img src={item.imgSrc} alt="" />
              </a>
            </Swiper.Item>
        )
    })

浏览器依然报那个需要有子元素的提示。。。不知道问题出在哪里。。。

[ken428965]

imgSrc里的地址是对的，因为可以正常显示多张轮播图片

[MuxinFeng]

把你要渲染的元素打印出来，如果不是空的也展示不了，就试试 {...renderItem()}

[ken428965]

问题解决了，原来在这里加两个并且即可：

{!isloading && houseImg && houseImg.length > 0 ? (
              <Swiper indicatorProps={{
                  color: 'white',
              }} defaultIndex={0} loop autoplay autoplayInterval={5000}>
                  {renderSwipers()}
              </Swiper>
          ) : (
            ''
          )}

感谢您的提醒与分享~~~

[ken428965]

问题解决了，原来在这里加两个并且即可：

{!isloading && houseImg && houseImg.length > 0 ? (
              <Swiper indicatorProps={{
                  color: 'white',
              }} defaultIndex={0} loop autoplay autoplayInterval={5000}>
                  {renderSwipers()}
              </Swiper>
          ) : (
            ''
          )}

感谢您的提醒与分享~~~

[MuxinFeng]

git status
git add
git commit

一例

[ken428965]

已写的部分代码： // ... function HouseDetail() { const [houseinfo, setHouseinfo] = useState({ houseImg: [], // ... } }) // ... function renderSwipers() { const { houseImg } = houseinfo console.log(houseImg) 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> // ... } // ... 能console出图片数据，能显示多张轮播图，swiper和swiper.item里面已经有子元素，但浏览器就是一直提示说Swiper needs at least one child，请问为什么？