数据长度不确定时使用.map 循环渲染数据

开发过程中，总会遇到数据长度不确定的情况，又不是所有数据都是表格模式，所以就难免需要一个能渲染不确定长度数据的东东，用来简化我们的工作，提高开发效率。

事实上，js早有设置。
就看你会不会用而已。

最近遇到一个卡片套表格，卡片套列表的布局。
虽说不是特别复杂，但是也总不能一条一条的去写吧，所以肯定要用循环啊。但是又没有确定的数据条数，所以就让map循环出来亮相吧。
里面的数据和字段都是我当时需要的，看不明白的无需强求，只看个大致结构就行了。知道这种写法会用在什么时候就可以了。

render(){
    // 数据模块  assetsList是我的接口数据  解构赋值拿来用
    const { assetsList } = this.state;
    //设置第一层卡片初始为空
    let cards = [];
    //使用map迭代循环第一层
    assetsList.map((asset, index) => {
      //在第一层里面设置第二层卡片初始为空
      let childrenCards = [];
      //map循环第二层
      asset.bindAddressList.map((address, index) => {
        //将二层结构push进第二层卡片
        childrenCards.push(
          <div key={`address_${index}`}>
            <span>{address.address}</span>
            <Row className="row" type="flex">
              <Col span={24} order={1}>余额：{address.banlance}</Col>
            </Row>
            <Row className="row" type="flex">
              <Col span={24} order={1}>绑定类型：{address.bindType}</Col>
            </Row>
          </div>
        );
      });
      //将第一层的结构push进去
      cards.push(
        <Card
          key={`card1_${index}`}
          bordered={false}
          className='card2'
        >
          <div className="float3">
            <img className="left" style={{width: 30, height: 30, marginTop:0,marginLeft:10,marginRight:10,marginBottom:10, }} src={Location.icon} />
            <span className="left"><h1>{`${asset.symbol}`+`${" "}`+`${asset.fullName}`}</h1></span>
            <span className="right">该数据更新时间：{asset.utime}</span>
            <Divider/>
          </div>
          <Row className="row" type="flex">
            <Col span={24} order={1}>总余额：{asset.totalCoins}</Col>
          </Row>

          <Card className='card2-1'
                title="绑定地址"
          >
            {/*将第二层的结构放入第一层*/}
            {childrenCards}
          </Card>
        </Card>
      );
    });