MAP es6は反応しているオブジェクトの配列では機能しませんか？

Question

MAP es6は反応するオブジェクトの配列では機能しません。私は、にconsole.log（アイテム）を行うと、私の私はマップ内this.skillsですが、再びarrayある

{item.skills.map(item => 
    <p>{item.skills.name}</p> 
)} 

Answer 1

理由を行うJSXのレンダリングでとても

{ 
"skills": [{ 
    "field": { 
     "id": 1, 
     "name": { 
      "en": "Web Developer" 
     } 
    }, 
    "skills": [{ 
     "id": 2, 
     "name": { 
      "en": "Blog" 
     } 
    }] 
}, { 
    "field": { 
     "id": 3, 
     "name": { 
      "en": "UI/ UX Designer" 
     } 
    }, 

    "skills": [ { 
     "id": 4, 
     "name": { 
      "en": "Web Interface" 
     } 
    }] 
}] 

}

次の結果を得ます名前がobjectの場合は、最初にJSON構造を変更する必要があります。name.enを使用する必要がある場合は、

let data = { 
 
    "skills": [{ 
 
     "field": { 
 
      "id": 1, 
 
      "name": { 
 
       "en": "Web Developer" 
 
      } 
 
     }, 
 
     "skills": { 
 
      "id": 2, 
 
      "name": { 
 
       "en": "Blog" 
 
      } 
 
     } 
 
    },{ 
 
     "field": { 
 
      "id": 3, 
 
      "name": { 
 
       "en": "UI/ UX Designer" 
 
      } 
 
     }, 
 

 
     "skills": { 
 
      "id": 4, 
 
      "name": { 
 
       "en": "Web Interface" 
 
      } 
 
     } 
 
    }] 
 
} 
 

 
data.skills.map((item)=>{ 
 
    console.log(item.skills.name.en); 
 
})

あなたはarrayとしてskills内skillsを定義し、それが唯一の項目が含まれます場合は、このような名前にアクセスする必要があります。

item.skills[0].name.en

そうでなければ再度mapを実行して名前にアクセスする必要があります。このように：

data.skills.map((item)=>{ 
    item.skills.map((el)=>{ 
     console.log(el.name.en); 
    }); 
}) 

Answer 2

skills[n].skillsは配列です。そして構造を変更するか、最初のmapメソッドに.mapを再度実行する必要があります。このように：

{item.skills.map(item => 
    item.skills.map(skill => 
    <p>{skill.name[en]}</p> 
    ) 
)}