反応jsのネストされた配列の値を反復する方法は？

Question

私はこのようなネストされた配列を持っています。内側の役割は、もう2つのオブジェクトがroleIdとroleNameです。 UIの2つのオブジェクトのroleNameの両方を表示する必要があります。どのようにreactjsでこれを達成するには？

0:Object 
displayName: "User Two" 
dob:null 
email:null 
firstName:"User" 
gender:null 
languageId:null 
lastAccessedOn:null 
lastName:"Two" 
middleName:null 
password:null 
pin:null 

roles:Array(2) 
0:Object 
roleId:"37d8f51d-09c9-4d55-9ab0-60d0d031b412" 
roleName:"Theranos Manufacturing" 
1:Object 
roleId:"af4c1fd4-6a7b-4b3e-aad1-da5b372502d8" 
roleName:"Theranos Master Admin" 

length:2 
__proto__ 
: 
Array(0) 

Answer 1

あなたの配列が名前であると言うがdataであり、その中で、あなたは再び、あなたは

{data.map((item, index) => { 
    return (
     <div> 
       {item.roles.map(role, idx) => { 
        return <ul key={role.roleId}><li >{role.roleId}</li> 
         <li>{role.roleName}</li></ul> 
       }} 
     </div> 
    ) 
})} 

のようにそれらの上にマップを入れ子にしていることができ、アレイで含ま objectsと key rolesを持っています