react+immutable.js数据闪现的问题

Question

在使用了immutable后，当数据尚未加载完成的时候，会出现immutable数据结构中的size等

这是父组件的代码
class City extends Component {

componentDidMount(){
    this.props.getHotCity();
    this.props.getGroupCity();
}
render() {
    const {hotCities, groupCities} = this.props;
    const Groups = () => {
        if(!groupCities){
            return null;
        }else {
            let keyArr = Object.keys(groupCities).sort();
            return (
                    keyArr.map((item, index) => {
                        return (
                                <Cities list={groupCities[item]} title={item} key={index} isHot={false} isFirst={index} />
                        )
                    })
            )
        }
    };
    return (
            <div>
                <Header />
                <Nav />
                <Cities list={hotCities} title='热门城市' isHot={true} />
                <Groups />
            </div>
    )
}

}
const mapProps = (state) => ({

hotCities: state.getIn(['city', 'hotCities']),
groupCities: state.getIn(['city', 'groupCities'])

});

子组件代码
class Cities extends Component {

render () {
    const {list, title, isHot, isFirst} = this.props;
    const Item = () => {
        if(!list) {
            return null;
        }else {
            return (
                    list.map((item, index) => {
                        return (
                                <Link to={{pathname: `/city/${item.id}`}} key={index} className={`${styles.list_item} ${isHot ? styles.hot_text_color : ''}`} >{item.name}</Link>
                        )
                    })
            )
        }
    };
    return (
            <div className={styles["list-container"]}>
                <p className={styles.list_title}>{title} {isFirst === 0 ? '(按字母排序)' : ''}</p>
                <ul className={styles.list_box}>
                    <Item list={list} />
                </ul>
            </div>
    )
}

}

在页面上的效果如下（尚未加载出数据的时候）

数据加载完成

想要的效果就是在数据没有加载完成不显示，这样的话怎么处理呢？