在reactjs中循环数组数组

Question

MAP es6 doesn't work with array of arrays in react, 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"
        }
    }]
}]

}

so in my render of jsx I do:

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

Answer 1

Reason is this.skills inside map is again an array , and name is an object , first you need to change the JSON structure, and to access the name you need to use name.en , check this:

 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); })

If you defined skills inside the skills as an array and it will contain only one item, then you need to access the name like this:

item.skills[0].name.en

Otherwise you need to run a map again to access the name. like this:

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

Answer 2

Your skills[n].skills is array. And you need change the structure or execute .map again into your first map method. Like this:

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