Antd-mobile Carousel走马灯 抽奖模块 动态请求fetch拿到的数据不能轮播,是官方bug吗?

#1

问题描述

antd-mobile Carousel走马灯 抽奖模块 动态请求fetch拿到的数据不能轮播

问题出现的环境背景及自己尝试过哪些方法

看的官方demo复制的,但是他那个是初始化写死的可以轮播
https://mobile.ant.design/components/carousel-cn/ 官方示例

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

import React from "react";

import {Carousel} from 'antd-mobile';

class Zjmd extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {

    // userInfo  父组件传过来的props [{phone:'xxx'},{phone:'xxx'},{phone:'xxx'}]
    const {userInfo} = this.props;

    return (
      <Carousel className="my-carousel"
                vertical
                dots={false}
                dragging={false}
                swiping={false}
                autoplay
                infinite
                speed={200}
                autoplayInterval={2000}
                resetAutoplay={false}>

        {userInfo.map(function (v, i) {  // map遍历 渲染
          return <div>{v.phone}</div>
        })}

      </Carousel>
    );
  }
}

export default Zjmd;

你期待的结果是什么?实际看到的错误信息又是什么?

没有报错,数据可以展示但是不轮播,如果是写死的数据可以轮播,希望通过fetch请求的数据然后可以遍历轮播

#2

return div>{v.phone} 这里的div标签少写了 <

#3

oh sorry ,我的问题,现在加上了 但是还是不行

#5

给循环的 div加上 key={i}

#6

也不行 也不报错。。。 有在代码里用过的大神吗?我查了下好像是官方bug

#7

关注一下mark

#8

初始化一个state = {flag:false},在componentDidmount里面请求成功以后flag改为true,
将Carousel 的autoplay改为 autoplay={this.state.flag}就可以动态加载轮播了

2 Likes
#9

我这样写了并没有起作用啊。还是不能轮播

#10

不行吗?我这也是

#11

你能滑动吗,这需要全部的代码。如果这都有bug那么antd-mobile 早就没人要了

#12

该方法确实可行, 解决了这个困扰我的问题, 非常感谢。

#13

我也碰到了这样的问题 怎么解决啊

#14

你这个最后怎么解决的呢?

#15

加上一个条件,在请求数据结束并且数据不为空的情况下才显示走马灯,这样就正常了,屡试不爽