react UI组件库antd-mobile中的carousel组件的一些问题

Question

代码如下所示：

class Home extends Component {
    render() {
        const {
            carousels: {
                value = []
            } = {}
        } = this.props;
        
        return (
            <div>
                <Carousel className="my-carousel" autoplay={false} infinite>
                    {
                        value.map((item,index) => (
                            <img key={index} src={item}></img>
                        ))
                    }
                </Carousel>
            </div>
        );
    }
}

carousels是在Home组件的父组件中通过异步请求获得，然后通过props传到Home组件中的。carousels中的value是一个数组，包含了图片的url。

现在的话图片加载出来就是Carousel组件的默认高度，只有100px。然后如果自动轮播或者滑动的话图片的高度才会出来。

我想了一下原因大概是一开始value是空的，然后没有图片，组件就把组件高度设为了默认高度100px，就定死了。当图片的数据传下来以后，因为一开始组件已经把组件高度定死了，就不再自适应图片高度，造成组件高度是默认高度。（这里我也不知道为什么会这样，有人解答一下？）然后当滑动图片的时候，应该是触发了什么条件，让图片自适应了。（这里其实我也不知道为什么，高手解答一下？）

具体大概是这样：

我期待的：

然后实际上是这样的：

只有滑动之后或则自动轮播之后才会正常。

就是如果map前面的value如果是直接写死在里面，像官网的domo那样，就是没问题的，就是如果是从服务器拿图片数据回来再渲染，一开始图片是空的，才造成会这样好像

有没有人遇到跟我一样的问题...

求高手解答，弄了一下午了，好郁闷

Answer 1

给一个初始化的数据就行了

constructor(props) {

    super(props);
    this.state = {
        imgHeight: 176,
        data: [1,2,3]
      }
}

componentDidMount() {

    // simulate img loading
    // console.log(this.props)
    this.props.getBannerData()

    setTimeout(() => {
        // console.log(this.props.data)
        this.setState({
            ...this.state,
            data: this.props.data.bannerData
        });
    }, 100);
}

传参
this.state.data.map((val, index) => (）

Answer 2

你把你定死的高度改为最小高度试试看

Answer 3

 this.state = {
      imgHeight: '',
 };
templateList.map((item, index) => {
                return (
                  <div className="template-banner" key={item.key}>
                    <div className="img-preview"
                         style={{height: this.state.imgHeight }}
                      >
                      <img
                        onLoad={() => {
                          // fire window resize event to change height
                          window.dispatchEvent(new Event('resize'));
                          this.setState({ imgHeight: 'auto' });
                        }}
                        src={item.img} alt={item.title}/>
                      <span className="preview">
                        <span className="text">预览</span>
                      </span>
                    </div>
                    <span className="name">{item.title}</span>
                  </div>
                )
              })