react渲染object的数组元素

{
    "id": 1,
    "username": "admin",
    "nickname": "张三",
     
    "createTime": 1609837427000,
    "roles": [
        {
            "id": 1,
            "name": "超级管理员"
        },
        {
            "id": 2,
            "name": "普通角色"
        }
    ],
    "dept": {
        "id": 103,
        "name": "研发部门",
        "parentId": 101
    },
    "posts": [
        {
            "id": 1,
            "name": "董事长"
        }
    ],
    "socialUsers": []
}

接口返回的数据格式user为此对象

现在要遍历展示管理员角色，roles内容。

user.roles && user.roles.length这两个判断为必填

<Card title="角色" bordered={false}>
     {user.roles && user.roles.length && user.roles.map((item,index)=>{
           return <Tag key={index}>{item.name}</Tag>
      	})
     }
</Card>